對話框 Overlays

浮層元件，包含對話框、下拉選單、提示框和通知。

對話框元件，用於重要操作確認或表單輸入。

<flux:modal.trigger name="demo-modal">
    <flux:button variant="primary">開啟 Modal</flux:button>
</flux:modal.trigger>

<flux:modal name="demo-modal" class="max-w-lg">
    <flux:heading size="lg">Modal 標題</flux:heading>
    <flux:text class="mt-2">這是一個基本的對話框範例。</flux:text>

    <div class="flex justify-end gap-2 mt-6">
        <flux:modal.close>
            <flux:button variant="ghost">取消</flux:button>
        </flux:modal.close>
        <flux:button variant="primary">確認</flux:button>
    </div>
</flux:modal>

<flux:modal.trigger name="confirm-modal">
    <flux:button variant="danger">確認刪除</flux:button>
</flux:modal.trigger>

<flux:modal name="confirm-modal" class="max-w-md">
    <flux:heading size="lg">確認刪除</flux:heading>
    <flux:text class="mt-2">您確定要刪除此項目嗎？此操作無法復原。</flux:text>

    <div class="flex justify-end gap-2 mt-6">
        <flux:modal.close>
            <flux:button variant="ghost">取消</flux:button>
        </flux:modal.close>
        <flux:button variant="danger" wire:click="confirmDelete">刪除</flux:button>
    </div>
</flux:modal>

<flux:modal name="flyout-right" variant="flyout">
    <flux:heading size="lg">右側滑出面板</flux:heading>
    <flux:text class="mt-2">從右側滑出的面板。</flux:text>
</flux:modal>

<flux:modal name="flyout-left" variant="flyout" position="left">
    <flux:heading size="lg">左側滑出面板</flux:heading>
    <flux:text class="mt-2">從左側滑出的面板。</flux:text>
</flux:modal>

<flux:modal name="flyout-bottom" variant="flyout" position="bottom">
    <flux:heading size="lg">底部滑出面板</flux:heading>
    <flux:text class="mt-2">從底部滑出的面板。</flux:text>
</flux:modal>

<flux:modal name="form-modal" class="max-w-md">
    <form wire:submit="saveForm" class="space-y-6">
        <div>
            <flux:heading size="lg">新增項目</flux:heading>
            <flux:text class="mt-2 text-zinc-500">填寫以下資訊來新增項目。</flux:text>
        </div>

        <flux:input label="名稱" placeholder="請輸入名稱" />
        <flux:textarea label="描述" placeholder="請輸入描述" rows="3" />

        <div class="flex justify-end gap-2">
            <flux:modal.close>
                <flux:button variant="ghost">取消</flux:button>
            </flux:modal.close>
            <flux:button type="submit" variant="primary">儲存</flux:button>
        </div>
    </form>
</flux:modal>

<flux:modal name="modal-sm" class="max-w-sm">
    <flux:heading>小型 Modal</flux:heading>
</flux:modal>

<flux:modal name="modal-md" class="max-w-md">
    <flux:heading>中型 Modal</flux:heading>
</flux:modal>

<flux:modal name="modal-lg" class="max-w-lg">
    <flux:heading>大型 Modal</flux:heading>
</flux:modal>

<flux:modal name="modal-xl" class="max-w-xl">
    <flux:heading>特大 Modal</flux:heading>
</flux:modal>

// PHP
public bool $modalOpen = false;

// Blade
<flux:button wire:click="$set('modalOpen', true)">
    開啟綁定 Modal
</flux:button>

<flux:modal wire:model="modalOpen" class="max-w-md">
    <flux:heading>資料綁定 Modal</flux:heading>
    <flux:text class="mt-2">此 Modal 使用 wire:model 進行狀態綁定。</flux:text>

    <div class="flex justify-end gap-2 mt-6">
        <flux:button wire:click="$set('modalOpen', false)" variant="ghost">
            關閉
        </flux:button>
    </div>
</flux:modal>

下拉選單元件，用於操作選項和導航。

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">選項</flux:button>
    <flux:menu>
        <flux:menu.item icon="pencil">編輯</flux:menu.item>
        <flux:menu.item icon="document-duplicate">複製</flux:menu.item>
        <flux:menu.separator />
        <flux:menu.item icon="trash" variant="danger">刪除</flux:menu.item>
    </flux:menu>
</flux:dropdown>

操作

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">操作</flux:button>
    <flux:menu>
        <flux:menu.heading>操作</flux:menu.heading>
        <flux:menu.item icon="eye">檢視</flux:menu.item>
        <flux:menu.item icon="pencil">編輯</flux:menu.item>
        <flux:menu.submenu heading="更多選項">
            <flux:menu.item>匯出 PDF</flux:menu.item>
            <flux:menu.item>匯出 CSV</flux:menu.item>
            <flux:menu.item>列印</flux:menu.item>
        </flux:menu.submenu>
        <flux:menu.separator />
        <flux:menu.item icon="trash" variant="danger">刪除</flux:menu.item>
    </flux:menu>
</flux:dropdown>

<flux:dropdown position="top">
    <flux:button>上方</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown position="right">
    <flux:button>右側</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown position="bottom">
    <flux:button>下方</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown position="left">
    <flux:button>左側</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown align="start">
    <flux:button>起始對齊</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown align="center">
    <flux:button>置中對齊</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

<flux:dropdown align="end">
    <flux:button>結束對齊</flux:button>
    <flux:menu>...</flux:menu>
</flux:dropdown>

懸停提示框，用於顯示額外資訊和說明。

這是一個提示框

此按鈕會執行儲存操作

<flux:tooltip content="這是一個提示框">
    <flux:button>懸停顯示</flux:button>
</flux:tooltip>

上方提示

右側提示

下方提示

左側提示

<flux:tooltip content="上方提示" position="top">
    <flux:button>上方</flux:button>
</flux:tooltip>

<flux:tooltip content="右側提示" position="right">
    <flux:button>右側</flux:button>
</flux:tooltip>

<flux:tooltip content="下方提示" position="bottom">
    <flux:button>下方</flux:button>
</flux:tooltip>

<flux:tooltip content="左側提示" position="left">
    <flux:button>左側</flux:button>
</flux:tooltip>

儲存 ⌘S

複製 ⌘C

貼上 ⌘V

<flux:tooltip content="儲存" kbd="⌘S">
    <flux:button variant="primary" icon="check">儲存</flux:button>
</flux:tooltip>

<flux:tooltip content="複製" kbd="⌘C">
    <flux:button icon="document-duplicate">複製</flux:button>
</flux:tooltip>

這是一個互動式提示框，可以將滑鼠移至提示框上進行互動。

<flux:tooltip content="這是一個互動式提示框" interactive>
    <flux:button>互動提示</flux:button>
</flux:tooltip>

Toast 通知

Toast 通知元件，用於顯示臨時訊息和操作反饋。

基本通知 Basic

<flux:button
    x-data
    x-on:click="$flux.toast('這是一則通知訊息')"
>
    顯示 Toast
</flux:button>

<flux:button
    x-data
    x-on:click="$flux.toast({ heading: '通知標題', text: '這是通知內容' })"
>
    含標題 Toast
</flux:button>

樣式變化 Variants

<flux:button
    x-data
    x-on:click="$flux.toast({ heading: '成功', text: '操作已完成', variant: 'success' })"
>
    成功通知
</flux:button>

<flux:button
    x-data
    x-on:click="$flux.toast({ heading: '警告', text: '請注意此操作', variant: 'warning' })"
>
    警告通知
</flux:button>

<flux:button
    x-data
    x-on:click="$flux.toast({ heading: '錯誤', text: '發生錯誤，請重試', variant: 'danger' })"
>
    錯誤通知
</flux:button>

顯示時長 Duration

<flux:button
    x-data
    x-on:click="$flux.toast({ text: '短暫通知（2秒）', duration: 2000 })"
>
    2 秒
</flux:button>

<flux:button
    x-data
    x-on:click="$flux.toast({ text: '標準通知（5秒）', duration: 5000 })"
>
    5 秒
</flux:button>

從 Livewire 觸發 From Livewire

// PHP
public function confirmDelete(): void
{
    \Flux::toast('項目已刪除', variant: 'danger');
}

// Blade
<flux:button wire:click="confirmDelete" variant="danger">
    觸發 Livewire Toast
</flux:button>

API Reference

完整的元件屬性參考。

屬性	值	說明
name	string	Modal 唯一識別名稱
variant	default \| flyout \| bare	Modal 樣式變化
position	right \| left \| bottom	Flyout 模式的位置（僅 variant="flyout" 時）
wire:model	boolean	綁定 Livewire 屬性控制開關
dismissible	true \| false	點擊背景是否關閉
closable	true \| false	是否顯示關閉按鈕

屬性	值	說明
position	top \| right \| bottom \| left	下拉選單彈出位置
align	start \| center \| end	下拉選單對齊方式
hover	true \| false	懸停時觸發（預設為點擊）

屬性	值	說明
content	string	提示框文字內容
position	top \| right \| bottom \| left	提示框顯示位置
kbd	string	鍵盤快捷鍵提示
interactive	true \| false	允許滑鼠移至提示框上互動
toggleable	true \| false	點擊切換顯示狀態
disabled	true \| false	停用提示框

Toast 通知方法

// JavaScript
$flux.toast('簡單訊息')

$flux.toast({
    heading: '標題',
    text: '訊息內容',
    variant: 'success', // success | warning | danger
    duration: 5000 // 毫秒
})

// PHP Livewire
\Flux::toast('訊息內容', variant: 'success')

對話框 Overlays

Modal 對話框

Dropdown 下拉選單

Tooltip 提示框

Toast 通知

API Reference