Flux UI
Toggle sidebar

導航 Navigation

導航相關元件，用於頁面和功能之間的導航。

Navbar 頂部導航

水平導航列，通常用於頁面頂部。

基本導航列 Basic Navbar
程式碼範例
<flux:navbar>
    <flux:navbar.item icon="home" href="#" current>首頁</flux:navbar.item>
    <flux:navbar.item icon="users" href="#">用戶</flux:navbar.item>
    <flux:navbar.item icon="cog" href="#">設定</flux:navbar.item>
    <flux:navbar.item icon="bell" href="#">通知</flux:navbar.item>
</flux:navbar>
帶徽章 With Badges
下拉式導航 Dropdown Navigation

Navlist 垂直導航

垂直導航列表，適合側邊欄使用。

基本垂直導航 Basic Navlist
帶徽章 With Badges
可收合群組 Collapsible Groups

Breadcrumbs 麵包屑

麵包屑導航，顯示當前頁面層級。

基本麵包屑 Basic Breadcrumbs
首頁
用戶管理
編輯用戶
帶圖示 With Icon
部落格
文章
使用斜線分隔 With Slashes
首頁
部落格
文章
使用省略號 With Ellipsis
文章
省略號下拉選單 Ellipsis Dropdown
文章

Sidebar 側邊欄

側邊欄導航元件。

側邊欄元件通常用於整體頁面布局。請參考本頁面左側的側邊欄作為範例。

Pagination 分頁

分頁元件，需搭配 Laravel 分頁器使用。

顯示 1 至 10 筆，共 100 筆

...

Tabs 分頁籤

分頁籤元件，用於在同一區域切換不同內容。

預設樣式 Default

帳號設定內容區域

密碼設定內容區域

通知設定內容區域

分段式 Segmented
膠囊式 Pills
小尺寸 Small Size
可捲動 Scrollable

Accordion 手風琴

手風琴元件，用於展開/收合內容區塊。

基本手風琴 Basic Accordion
Flux UI 是一套為 Laravel Livewire 設計的官方 UI 元件庫，提供豐富且美觀的元件。
可以透過 Composer 安裝：composer require livewire/flux
是的，所有 Flux UI 元件都原生支援深色模式。
預設展開 Expanded
我們的產品提供業界領先的功能，包括即時同步、智慧分析和強大的整合能力。
提供彈性的訂閱方案，從個人版到企業版，滿足不同規模的需求。
獨佔模式 Exclusive

一次只能展開一個項目

管理您的個人資料、密碼和安全設定。
自訂您希望接收的通知類型和頻率。
控制誰可以查看您的個人資料和活動。
帶動畫 With Transition
這個手風琴項目會以平滑的動畫方式展開和收合，提供更好的使用者體驗。
動畫效果讓使用者更清楚地了解介面的變化。
反向圖示 Reverse
我們提供全天候的技術支援服務。
完整的 API 文件和使用指南。
停用項目 Disabled Item
這個項目可以正常展開和收合。
此功能目前正在開發中，即將推出。
更多相關資訊和說明。

API 參考 Reference

所有導航元件的屬性和選項說明。

flux:navbar & flux:navbar.item
屬性
值
說明
href URL 導航項目的連結位置
icon 圖示名稱 顯示在項目前的圖示
icon:trailing 圖示名稱 顯示在項目後的圖示
current boolean 標記為當前頁面（自動偵測）
badge string/number 顯示徽章內容
badge:color 顏色名稱 徽章顏色
flux:navlist.item & flux:navlist.group
屬性
值
說明
heading string 群組標題文字
expandable boolean 允許展開/收合
expanded boolean 預設展開狀態（預設為 true）
flux:breadcrumbs.item
屬性
值
說明
href URL 項目連結（省略則為純文字）
icon 圖示名稱 顯示的圖示
separator chevron-right, slash 分隔符號樣式
flux:tabs & flux:tab
屬性
值
說明
wire:model Livewire 屬性 綁定選中的分頁
variant default, segmented, pills 分頁籤樣式
size base, sm 分頁籤尺寸
scrollable boolean 啟用水平捲動
scrollable:fade boolean 在捲動邊緣加入淡出效果
name string 分頁唯一識別碼
icon 圖示名稱 分頁圖示
flux:accordion & flux:accordion.item
屬性
值
說明
variant default, reverse 圖示位置（reverse 為前方）
transition boolean 啟用展開動畫
exclusive boolean 一次只能展開一個項目
heading string 項目標題文字
expanded boolean 預設展開狀態
disabled boolean 停用項目