Flux UI
Toggle sidebar

資料 Data

資料展示元件,用於表格、看板等結構化資料呈現。

Table 表格

表格元件,用於展示結構化資料。

基本表格 Basic Table

基本的表格結構,包含欄位標題與資料行。

名稱
Email
角色
狀態
JD
John Doe
john@example.com 管理員
啟用
JS
Jane Smith
jane@example.com 編輯者
啟用
BW
Bob Wilson
bob@example.com 檢視者
停用 
<flux:table>
    <flux:table.columns>
        <flux:table.column>名稱</flux:table.column>
        <flux:table.column>Email</flux:table.column>
        <flux:table.column>角色</flux:table.column>
        <flux:table.column>狀態</flux:table.column>
        <flux:table.column></flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        <flux:table.row>
            <flux:table.cell>John Doe</flux:table.cell>
            <flux:table.cell>john@example.com</flux:table.cell>
            <flux:table.cell>管理員</flux:table.cell>
            <flux:table.cell>
                <flux:badge color="green">啟用</flux:badge>
            </flux:table.cell>
            <flux:table.cell>
                <flux:dropdown>
                    <flux:button icon="ellipsis-horizontal" variant="ghost" size="sm" />
                    <flux:menu>
                        <flux:menu.item icon="pencil">編輯</flux:menu.item>
                        <flux:menu.item icon="trash" variant="danger">刪除</flux:menu.item>
                    </flux:menu>
                </flux:dropdown>
            </flux:table.cell>
        </flux:table.row>
    </flux:table.rows>
</flux:table>
可排序表格 Sortable Table

允許使用者依照特定欄位排序資料。

客戶
LA
Lindsey Aminoff 		2025年1月15日 10:45
已付款
NT$ 1,490
HL
Hanna Lubin 		2025年1月14日 14:15
已付款
NT$ 9,360
KB
Kianna Bushevi 		2025年1月16日 16:05
已退款
NT$ 3,960 
<flux:table>
    <flux:table.columns>
        <flux:table.column>客戶</flux:table.column>
        <flux:table.column sortable sorted direction="desc">日期</flux:table.column>
        <flux:table.column sortable>狀態</flux:table.column>
        <flux:table.column sortable>金額</flux:table.column>
    </flux:table.columns>
    <!-- ... -->
</flux:table>
欄位對齊 Column Alignment

使用 align 屬性控制欄位內容的對齊方式。

產品名稱
分類
庫存
單價
MacBook Pro 14"
筆記型電腦
25 NT$ 59,900
iPhone 15 Pro
智慧型手機
42 NT$ 36,900
AirPods Pro
配件
128 NT$ 7,990 
<flux:table>
    <flux:table.columns>
        <flux:table.column align="start">產品名稱</flux:table.column>
        <flux:table.column align="center">分類</flux:table.column>
        <flux:table.column align="end">單價</flux:table.column>
    </flux:table.columns>
    <!-- ... -->
</flux:table>
儲存格樣式 Cell Variants

使用 variant="strong" 強調重要資料。

訂單編號
項目
數量
小計
#ORD-1001 MacBook Pro 2 NT$ 119,800
#ORD-1002 iPhone 15 5 NT$ 184,500
#ORD-1003 AirPods Pro 10 NT$ 79,900 
<flux:table.cell variant="strong">NT$ 119,800</flux:table.cell>
分頁控制 Pagination

搭配 Laravel 分頁功能顯示大量資料。

顯示 1 至 10 筆,共 100 筆

...

每頁 10 筆

<!-- 在 Livewire 元件中使用分頁 -->
<flux:table :paginate="$orders">
    <!-- ... -->
</flux:table>

<!-- 元件類別中 -->
#[Computed]
public function orders()
{
    return Order::query()
        ->orderBy('created_at', 'desc')
        ->paginate(10);
}
空資料狀態 Empty State

當表格無資料時顯示友善的訊息。

名稱
Email
狀態
目前沒有任何資料

開始新增您的第一筆資料

<flux:table>
    <flux:table.columns>
        <!-- ... -->
    </flux:table.columns>

    <flux:table.rows>
        
    </flux:table.rows>
</flux:table>

<div class="p-12 text-center border-t">
    <flux:icon.inbox-stack size="lg" class="text-zinc-400 mb-3" />
    <flux:heading size="sm" class="mb-2">目前沒有任何資料</flux:heading>
    <flux:text size="sm" class="text-zinc-500 mb-4">開始新增您的第一筆資料</flux:text>
    <flux:button variant="primary" size="sm" icon="plus">新增資料</flux:button>
</div>
響應式表格 Responsive Table

在小螢幕上使用橫向捲動來顯示完整表格。

訂單編號
客戶名稱
訂單日期
配送地址
金額
狀態
操作
#ORD-2025-001 王小明 2025-01-15 台北市信義區信義路五段7號 NT$ 5,990
已配送 
<flux:table>
    <!-- 使用 whitespace-nowrap 避免內容換行 -->
    <flux:table.cell class="whitespace-nowrap">...</flux:table.cell>
</flux:table>

Kanban 看板

看板元件,用於任務管理和專案追蹤。

基本看板 Basic Kanban

使用卡片與欄位組合建立任務看板。

待處理
2

設計首頁 UI

完成首頁的視覺設計稿

設計
Jo

撰寫 API 文件

更新 REST API 說明文件

文件
Ja
進行中
1

開發登入功能

實作 OAuth 2.0 登入流程

開發
Bo
審核中
1

優化資料庫查詢

提升查詢效能 50%

優化
Al
已完成
2

建立專案架構

完成
Jo

設定 CI/CD

完成
Bo 
<div class="flex gap-4 overflow-x-auto">
    <div class="w-72 bg-zinc-100 dark:bg-zinc-800 rounded-lg p-4">
        <div class="flex items-center justify-between mb-4">
            <flux:heading size="sm">待處理</flux:heading>
            <flux:badge size="sm" color="zinc">2</flux:badge>
        </div>
        <div class="space-y-3">
            <flux:card class="p-3">
                <flux:text size="sm" class="font-medium">任務標題</flux:text>
                <flux:text size="xs" class="text-zinc-500 mt-1">任務描述</flux:text>
                <div class="flex items-center justify-between mt-3">
                    <flux:badge size="sm" color="blue">標籤</flux:badge>
                    <flux:avatar size="xs" name="User" />
                </div>
            </flux:card>
        </div>
        <flux:button icon="plus" variant="ghost" size="sm" class="w-full mt-3">
            新增任務
        </flux:button>
    </div>
</div>
優先順序標示 Priority Indicators

使用顏色和圖示標示任務優先順序。

修復付款系統漏洞

緊急

立即處理安全性問題

Al

期限: 今天

優化首頁載入速度

高

改善使用者體驗

Bo

期限: 本週

更新使用者文件

中

補充新功能說明

Ca

期限: 下週

清理舊程式碼

低

移除不再使用的程式碼

Da

期限: 下個月

<flux:card class="p-3 border-l-4 border-l-red-500">
    <div class="flex items-center justify-between mb-2">
        <flux:text size="sm" class="font-medium">任務標題</flux:text>
        <flux:badge size="sm" color="red" icon="exclamation-triangle">緊急</flux:badge>
    </div>
    <!-- ... -->
</flux:card>
進度追蹤 Progress Tracking

在任務卡片中顯示完成進度。

開發會員系統

子任務進度

3/5 完成

開發中
Jo

UI/UX 改版

完成度

85%

即將完成
Ja 
<flux:card class="p-3">
    <flux:text size="sm" class="font-medium mb-2">任務標題</flux:text>
    <div class="space-y-2">
        <div class="flex items-center justify-between text-xs">
            <flux:text size="xs" class="text-zinc-500">子任務進度</flux:text>
            <flux:text size="xs" class="text-zinc-500">3/5 完成</flux:text>
        </div>
        <div class="w-full bg-zinc-200 dark:bg-zinc-700 rounded-full h-2">
            <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
        </div>
    </div>
</flux:card>
多重標籤 Multiple Tags

使用多個標籤分類任務。

電商平台整合

串接第三方支付與物流系統

Backend
API
Payment
Urgent

期限: 2025-02-01

Al
Bo
Ca

效能監控儀表板

建立即時系統監控介面

Frontend
UI/UX
Charts

期限: 2025-02-15

Da
Ev 
<flux:card class="p-3">
    <flux:text size="sm" class="font-medium mb-2">任務標題</flux:text>
    <div class="flex flex-wrap gap-1.5 mb-3">
        <flux:badge size="sm" color="blue">Backend</flux:badge>
        <flux:badge size="sm" color="purple">API</flux:badge>
        <flux:badge size="sm" color="green">Payment</flux:badge>
    </div>
</flux:card>

API Reference

資料元件的屬性與使用方式參考。

flux:table
Prop 值 說明
paginate Paginator Laravel 分頁實例,啟用分頁功能
flux:table.column
Prop 值 說明
align start | center | end 欄位內容對齊方式
sortable boolean 啟用欄位排序功能
sorted boolean 標示此欄位目前正在排序
direction asc | desc 排序方向(升冪或降冪)
flux:table.cell
Prop 值 說明
align start | center | end 儲存格內容對齊方式
variant default | strong 儲存格視覺樣式,strong 用於強調重要資料
flux:table.row
Prop 值 說明
key string | int 資料行的唯一識別符(wire:key 的別名)
Kanban 看板實作建議

結構組成

  • 使用 flex 容器搭配 gap 建立看板欄位
  • 每個欄位使用固定寬度(如 w-72)確保一致性
  • 使用 overflow-x-auto 支援橫向捲動
  • 使用 min-w-max 避免欄位被壓縮

任務卡片設計

  • 使用 flux:card 建立任務卡片
  • 使用 border-l-4 加上顏色標示優先順序或狀態
  • 使用 opacity 樣式表示已完成任務
  • 使用 line-through 表示完成的任務標題

互動功能

  • 可搭配 Livewire 實作拖放排序(使用 Sortable.js 等函式庫)
  • 使用 wire:click 處理任務狀態變更
  • 使用 Modal 元件新增或編輯任務詳情