# Flux UI組件中文文檔
## 目錄
- [Accordion 摺疊面板](#accordion-摺疊面板)
- [Avatar 頭像](#avatar-頭像)
- [Badge 徽章](#badge-徽章)
- [Breadcrumbs 麵包屑](#breadcrumbs-麵包屑)
- [Button 按鈕](#button-按鈕)
- [Calendar 日曆](#calendar-日曆)
- [Callout 標註](#callout-標註)
- [Card 卡片](#card-卡片)
- [Chart 圖表](#chart-圖表)
- [Checkbox 複選框](#checkbox-複選框)
- [Command 命令面板](#command-命令面板)
- [Date picker 日期選擇器](#date-picker-日期選擇器)
- [Dropdown 下拉選單](#dropdown-下拉選單)
- [Field 表單欄位](#field-表單欄位)
- [Heading 標題](#heading-標題)
- [Icon 圖標](#icon-圖標)
- [Modal 對話框](#modal-對話框)
- [Navbar 導航欄](#navbar-導航欄)
- [Pagination 分頁](#pagination-分頁)
- [Radio 單選框](#radio-單選框)
- [Rich text editor 富文本編輯器](#rich-text-editor-富文本編輯器)
- [Select 選擇框](#select-選擇框)
- [Separator 分隔線](#separator-分隔線)
- [Switch 開關](#switch-開關)
- [Table 表格](#table-表格)
- [Tabs 標籤頁](#tabs-標籤頁)
- [Text 文本](#text-文本)
- [Textarea 文本區域](#textarea-文本區域)
- [Toast 提示訊息](#toast-提示訊息)
- [Tooltip 提示框](#tooltip-提示框)
## Accordion 摺疊面板
可摺疊和展開的內容區塊，適用於FAQ和內容豐富的區域。
### 基本用法
```html
<flux:accordion>
<flux:accordion.item>
<flux:accordion.heading>What''s your refund policy?</flux:accordion.heading>
<flux:accordion.content>
If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.
</flux:accordion.content>
</flux:accordion.item>
<flux:accordion.item>
<flux:accordion.heading>Do you offer any discounts for bulk purchases?</flux:accordion.heading>
<flux:accordion.content>
Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements.
</flux:accordion.content>
</flux:accordion.item>
</flux:accordion>
```
### 簡寫方式
您可以通過將標題文本作為屬性傳遞來節省標記。
```html
<flux:accordion.item heading="What's your refund policy?">
If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.
</flux:accordion.item>
```
### 帶過渡效果
啟用展開過渡效果以獲得更流暢的交互體驗。
```html
<flux:accordion transition>
<!-- ... -->
</flux:accordion>
```
### 禁用項目
限制某個摺疊項目被展開。
```html
<flux:accordion.item disabled>
<!-- ... -->
</flux:accordion.item>
```
### 獨占模式
強制一次只能展開一個摺疊項目。
```html
<flux:accordion exclusive>
<!-- ... -->
</flux:accordion>
```
### 預設展開
預設展開特定的摺疊項目。
```html
<flux:accordion.item expanded>
<!-- ... -->
</flux:accordion.item>
```
### 前置圖標
在標題前而非後面顯示圖標。
```html
<flux:accordion variant="reverse">
<!-- ... -->
</flux:accordion>
```
### 參數參考
#### flux:accordion
| 屬性 | 說明 |
| --- | --- |
| variant | 設置為reverse時，在標題前顯示圖標而非後面 |
| transition | 如果為true，啟用展開過渡效果。預設：false |
| exclusive | 如果為true，一次只能展開一個摺疊項目。預設：false |
#### flux:accordion.item
| 屬性 | 說明 |
| --- | --- |
| heading | flux:accordion.heading內容的簡寫 |
| expanded | 如果為true，摺疊項目預設展開。預設：false |
| disabled | 如果為true，摺疊項目不能被展開或摺疊。預設：false |
#### flux:accordion.heading
| 插槽 | 說明 |
| --- | --- |
| default | 標題文本 |
#### flux:accordion.content
| 插槽 | 說明 |
| --- | --- |
| default | 摺疊項目展開時顯示的內容 |
## Avatar 頭像
顯示頭像圖片或縮寫。
### 基本用法
```html
<flux:avatar src="https://unavatar.io/x/calebporzio" />
```
### 帶提示框
使用tooltip屬性在懸停頭像時顯示提示框。
```html
<flux:avatar tooltip="Caleb Porzio" src="https://unavatar.io/x/calebporzio" />
<!-- 或從name屬性推斷... -->
<flux:avatar tooltip name="Caleb Porzio" src="https://unavatar.io/x/calebporzio" />
```
### 縮寫
當沒有提供src時，將使用name屬性自動生成縮寫。也可以直接使用initials屬性。
```html
<flux:avatar name="Caleb Porzio" />
<flux:avatar name="calebporzio" />
<flux:avatar name="calebporzio" initials:single />
<!-- 或直接使用initials屬性... -->
<flux:avatar initials="CP" />
```
### 尺寸
使用size屬性更改頭像的大小。
```html
<!-- 特大：size-16 (64px) -->
<flux:avatar size="xl" src="https://unavatar.io/x/calebporzio" />
<!-- 大：size-12 (48px) -->
<flux:avatar size="lg" src="https://unavatar.io/x/calebporzio" />
<!-- 預設：size-10 (40px) -->
<flux:avatar src="https://unavatar.io/x/calebporzio" />
<!-- 小：size-8 (32px) -->
<flux:avatar size="sm" src="https://unavatar.io/x/calebporzio" />
<!-- 特小：size-6 (24px) -->
<flux:avatar size="xs" src="https://unavatar.io/x/calebporzio" />
```
### 圖標
使用icon屬性顯示圖標而非圖片。
```html
<flux:avatar icon="user" />
<flux:avatar icon="phone" />
<flux:avatar icon="computer-desktop" />
```
### 顏色
使用color屬性更改頭像的顏色。
```html
<flux:avatar name="Caleb Porzio" color="red" />
<flux:avatar name="Caleb Porzio" color="blue" />
<!-- 更多顏色選項... -->
```
### 自動顏色
根據用戶名稱確定性地生成顏色。
```html
<flux:avatar name="Caleb Porzio" color="auto" />
<!-- 使用color:seed生成基於固定值（如用戶ID）的一致顏色 -->
<flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />
```
### 圓形
使用circle屬性使頭像變為圓形。
```html
<flux:avatar circle src="https://unavatar.io/x/calebporzio" />
```
### 徽章
可以用多種方式為頭像添加徽章，從簡單的圓點到數字或表情符號。
```html
<flux:avatar badge badge:color="green" badge:circle src="https://unavatar.io/x/calebporzio" />
<flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" />
<flux:avatar circle badge="👍" badge:circle src="https://unavatar.io/x/calebporzio" />
```
### 群組
將頭像堆疊在一起。
```html
<flux:avatar.group>
<flux:avatar src="https://unavatar.io/x/calebporzio" />
<flux:avatar src="https://unavatar.io/github/hugosaintemarie" />
<flux:avatar src="https://unavatar.io/github/joshhanley" />
<flux:avatar>3+</flux:avatar>
</flux:avatar.group>
```
### 參數參考
#### flux:avatar
| 屬性 | 說明 |
| --- | --- |
| name | 顯示為縮寫的用戶名稱。若提供且沒有initials，將用於自動生成縮寫 |
| src | 顯示為頭像的圖片URL |
| initials | 未提供src時顯示的自定義縮寫。若提供，將覆蓋name |
| alt | 頭像圖片的替代文本 (預設：若提供則為name) |
| size | 頭像大小。選項：xs (24px)、sm (32px)、(預設：40px)、lg (48px) |
| color | 顯示縮寫或圖標時的背景顏色 |
| color:seed | 當color="auto"時用於確定性生成一致顏色的值。用於使用用戶ID生成一致顏色 |
| circle | 如存在或為true，則使頭像完全為圓形而非圓角 |
| icon | 顯示圖標而非圖片或縮寫時的圖標名稱 |
| icon:variant | 使用的圖標變體。選項：outline、solid。預設：solid |
| tooltip | 懸停頭像時顯示的提示文本 |
| tooltip:position | 提示框的位置。選項：top、right、bottom、left。預設：top |
| badge | 顯示為徽章的內容。可以是字符串、布爾值或插槽 |
| badge:color | 徽章的顏色 |
| badge:circle | 如存在或為true，使徽章完全為圓形而非略微圓角 |
| badge:position | 徽章的位置。選項：top left、top right、bottom left、bottom right。預設：bottom right |
| badge:variant | 徽章的變體。選項：solid、outline。預設：solid |
| as | 將頭像渲染為的元素。選項：button、div (預設) |
| href | 連結到的URL，使頭像成為連結元素 |
## Badge 徽章
突出顯示諸如狀態、類別或計數等信息。
### 基本用法
```html
<flux:badge color="lime">New</flux:badge>
```
### 尺寸
使用size屬性在三種不同大小之間選擇。
```html
<flux:badge size="sm">Small</flux:badge>
<flux:badge>Default</flux:badge>
<flux:badge size="lg">Large</flux:badge>
```
### 圖標
使用icon和icon:trailing屬性為徽章添加圖標。
```html
<flux:badge icon="user-circle">Users</flux:badge>
<flux:badge icon="document-text">Files</flux:badge>
<flux:badge icon:trailing="video-camera">Videos</flux:badge>
```
### 藥丸樣式
使用variant="pill"屬性顯示完全圓角的徽章。
```html
<flux:badge variant="pill" icon="user">Users</flux:badge>
```
### 按鈕形式
將徽章包裹在button元素中使整個徽章可點擊。
```html
<flux:badge as="button" variant="pill" icon="plus" size="lg">Amount</flux:badge>
```
### 關閉按鈕
通過附加關閉按鈕使徽章可移除。
```html
<flux:badge>
Admin <flux:badge.close />
</flux:badge>
```
### 顏色
選擇一系列顏色以區分徽章並傳達情感。
```html
<flux:badge color="zinc">Zinc</flux:badge>
<flux:badge color="red">Red</flux:badge>
<!-- 更多顏色選項... -->
```
### 實心樣式
用於更重要的狀態指示器或警報的粗體、高對比度徽章。
```html
<flux:badge variant="solid" color="zinc">Zinc</flux:badge>
<flux:badge variant="solid" color="red">Red</flux:badge>
<!-- 更多顏色選項... -->
```
### 內嵌
如果您在內聯文本旁使用徽章，由於徽章周圍的額外填充，可能會遇到間距問題。使用inset屬性為徽章添加負邊距以避免這種情況。
```html
<flux:heading>
Page builder <flux:badge color="lime" inset="top bottom">New</flux:badge>
</flux:heading>
```
### 參數參考
#### flux:badge
| 屬性 | 說明 |
| --- | --- |
| color | 徽章顏色（例如zinc、red、blue）。預設：zinc |
| size | 徽章大小。選項：sm、lg |
| variant | 徽章樣式變體。選項：pill |
| icon | 在徽章文本前顯示的圖標名稱 |
| icon:trailing | 在徽章文本後顯示的圖標名稱 |
| icon:variant | 圖標變體。選項：outline、solid、mini、micro。預設：mini |
| as | 將徽章渲染為的HTML元素。選項：button。預設：div |
| inset | 添加特定側面的負邊距。選項：top、bottom、left、right，或四者的任意組合 |
#### flux:badge.close
| 屬性 | 說明 |
| --- | --- |
| icon | 顯示的圖標名稱。預設：x-mark |
| icon:variant | 圖標變體。選項：outline、solid、mini、micro。預設：mini |
## Breadcrumbs 麵包屑
幫助用戶導航並了解他們在應用程序中的位置。
### 基本用法
```html
<flux:breadcrumbs>
<flux:breadcrumbs.item href="#">Home</flux:breadcrumbs.item>
<flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item>
<flux:breadcrumbs.item>Post</flux:breadcrumbs.item>
</flux:breadcrumbs>
```
### 斜線分隔符
使用斜線而非箭頭分隔麵包屑項目。
```html
<flux:breadcrumbs>
<flux:breadcrumbs.item href="#" separator="slash">Home</flux:breadcrumbs.item>
<flux:breadcrumbs.item href="#" separator="slash">Blog</flux:breadcrumbs.item>
<flux:breadcrumbs.item separator="slash">Post</flux:breadcrumbs.item>
</flux:breadcrumbs>
```
### 帶圖標
為特定麵包屑項目使用圖標而非文本。
```html
<flux:breadcrumbs>
<flux:breadcrumbs.item href="#" icon="home" />
<flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item>
<flux:breadcrumbs.item>Post</flux:breadcrumbs.item>
</flux:breadcrumbs>
```
### 帶省略號
用省略號截斷長麵包屑列表。
```html
<flux:breadcrumbs>
<flux:breadcrumbs.item href="#" icon="home" />
<flux:breadcrumbs.item icon="ellipsis-horizontal" />
<flux:breadcrumbs.item>Post</flux:breadcrumbs.item>
</flux:breadcrumbs>
```
### 帶省略號下拉選單
將長麵包屑列表截斷為單個省略號下拉選單。
```html
<flux:breadcrumbs>
<flux:breadcrumbs.item href="#" icon="home" />
<flux:breadcrumbs.item>
<flux:dropdown>
<flux:button icon="ellipsis-horizontal" variant="ghost" size="sm" />
<flux:navmenu>
<flux:navmenu.item>Client</flux:navmenu.item>
<flux:navmenu.item icon="arrow-turn-down-right">Team</flux:navmenu.item>
<flux:navmenu.item icon="arrow-turn-down-right">User</flux:navmenu.item>
</flux:navmenu>
</flux:dropdown>
</flux:breadcrumbs.item>
<flux:breadcrumbs.item>Post</flux:breadcrumbs.item>
</flux:breadcrumbs>
```
### 參數參考
#### flux:breadcrumbs
| 插槽 | 說明 |
| --- | --- |
| default | 要顯示的麵包屑項目 |
#### flux:breadcrumbs.item
| 屬性 | 說明 |
| --- | --- |
| href | 麵包屑項目連結到的URL。若省略，則渲染為不可點擊的文本 |
| icon | 在徽章文本前顯示的圖標名稱 |
| icon:variant | 圖標變體。選項：outline、solid、mini、micro。預設：mini |
| separator | 顯示為分隔符的圖標名稱。預設：chevron-right |
## Button 按鈕
用於您的應用程序的功能強大且可組合的按鈕組件。
### 基本用法
```html
<flux:button>Button</flux:button>
```
### 變體
使用variant屬性更改按鈕的視覺樣式。
主要按鈕應謹慎使用；主要用於表單提交。
```html
<flux:button>Default</flux:button>
<flux:button variant="primary">Primary</flux:button>
<flux:button variant="filled">Filled</flux:button>
<flux:button variant="danger">Danger</flux:button>
<flux:button variant="ghost">Ghost</flux:button>
<flux:button variant="subtle">Subtle</flux:button>
```
### 尺寸
預設按鈕尺寸適用於大多數情況，但這裡有一些額外的尺寸選項用於獨特情況。
```html
<flux:button>Base</flux:button>
<flux:button size="sm">Small</flux:button>
<flux:button size="xs">Extra small</flux:button>
```
### 圖標
自動調整大小和樣式的按鈕圖標。
```html
<flux:button icon="ellipsis-horizontal" />
<flux:button icon="arrow-down-tray">Export</flux:button>
<flux:button icon:trailing="chevron-down">Open</flux:button>
<flux:button icon="x-mark" variant="subtle" />
```
### 加載中
帶有wire:click或type="submit"的按鈕將在網絡請求期間自動顯示加載指示器並禁用指針事件。
```html
<flux:button wire:click="save">
Save changes
</flux:button>
```
您可以使用:loading="false"禁用此行為。
```html
<flux:button wire:click="save" :loading="false">
```
### 全寬
跨越容器整個寬度的按鈕。
```html
<flux:button variant="primary" class="w-full">Send invite</flux:button>
```
### 按鈕組
將相關按鈕融合為具有共享邊框的組。
```html
<flux:button.group>
<flux:button>Oldest</flux:button>
<flux:button>Newest</flux:button>
<flux:button>Top</flux:button>
</flux:button.group>
```
### 圖標組
將多個圖標按鈕融合為視覺上連結的組。
```html
<flux:button.group>
<flux:button icon="bars-3-bottom-left"></flux:button>
<flux:button icon="bars-3"></flux:button>
<flux:button icon="bars-3-bottom-right"></flux:button>
</flux:button.group>
```
### 附加按鈕
將圖標按鈕附加或前置到另一個按鈕，以添加額外功能。
```html
<flux:button.group>
<flux:button>New product</flux:button>
<flux:button icon="chevron-down"></flux:button>
</flux:button.group>
```
### 作為連結
通過傳遞href屬性將HTML a標籤顯示為按鈕。
```html
<flux:button
href="https://google.com"
icon:trailing="arrow-up-right">
Visit Google
</flux:button>
```
### 作為輸入
要將按鈕顯示為輸入，將as="button"傳遞給輸入組件。
```html
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />
```
### 方形
使按鈕的高度和寬度相等。對於僅有圖標的按鈕，Flux會自動執行此操作。
```html
<flux:button square>...</flux:button>
```
### 內嵌
使用ghost或subtle按鈕變體時，可以使用inset屬性來消除任何不可見的填充以獲得更好的對齊。
```html
<div class="flex justify-between">
<flux:heading>Post successfully created.</flux:heading>
<flux:button size="sm" icon="x-mark" variant="ghost" inset />
</div>
```
### 參數參考
#### flux:button
| 屬性 | 說明 |
| --- | --- |
| as | 將按鈕渲染為的HTML標籤。選項：button (預設)、a、div |
| href | 當按鈕用作錨點標籤時連結到的URL |
| type | 按鈕的HTML類型屬性。選項：button (預設)、submit |
| variant | 按鈕的視覺樣式。選項：outline、primary、filled、danger、ghost、subtle。預設：outline |
| size | 按鈕大小。選項：base (預設)、sm、xs |
| icon | 在按鈕開頭顯示的圖標名稱 |
| icon:variant | 圖標的視覺樣式。選項：outline (預設)、solid、mini、micro |
| icon:trailing | 在按鈕末尾顯示的圖標名稱 |
| square | 如果為true，則使按鈕為方形。（適用於僅有圖標的按鈕） |
| inset | 為特定側面添加負邊距。選項：top、bottom、left、right，或四者的任意組合 |
| loading | 如果為true，則在與wire:click或type="submit"一起使用時顯示加載指示器並禁用按鈕。若為false，則按鈕完全不會顯示加載指示器。預設：true |
| tooltip | 懸停按鈕時顯示在提示框中的文本 |
| tooltip:position | 提示框的位置。選項：top、bottom、left、right。預設：top |
| tooltip:kbd | 懸停按鈕時顯示在鍵盤快捷鍵提示框中的文本 |
| kbd | 懸停按鈕時顯示在鍵盤快捷鍵提示框中的文本 |
#### flux:button.group
| 插槽 | 說明 |
| --- | --- |
| default | 要分組在一起的按鈕 |
## Calendar 日曆
用於日期選擇的靈活日曆組件。支持單一日期、多個日期和日期範圍。非常適合調度和預訂系統。
### 基本用法
使用具有Y-m-d格式的日期字符串的value屬性設置初始選定日期：
```html
<flux:calendar value="2025-03-25" />
```
您也可以使用wire:model將選擇綁定到Livewire屬性：
```html
<flux:calendar wire:model="date" />
```
現在您可以使用Carbon實例或Y-m-d格式的字符串從Livewire組件訪問所選日期：
```php
<?php
use Illuminate\Support\Carbon;
use Livewire\Component;
class BookAppointment extends Component {
public Carbon $date;
public function mount() {
$this->date = now();
}
}
```
### 多個日期
選擇多個非連續日期。
```html
<flux:calendar multiple />
```
使用value屬性中的逗號分隔列表設置多個選定日期：
```html
<flux:calendar
multiple
value="2025-03-02,2025-03-05,2025-03-15"/>
```
您也可以使用wire:model將選擇綁定到Livewire屬性：
```html
<flux:calendar multiple wire:model="dates" />
```
### 日期範圍
選擇日期範圍。
```html
<flux:calendar mode="range" />
```
使用value屬性設置初始範圍，其中開始和結束日期用斜杠分隔：
```html
<flux:calendar mode="range" value="2025-03-02/2025-03-06" />
```
您也可以使用wire:model將選擇綁定到Livewire屬性：
```html
<flux:calendar mode="range" wire:model="range" />
```
### 尺寸
調整日曆的大小以適應您的佈局。可用尺寸包括xs、sm、lg、xl和2xl。
```html
<flux:calendar size="xl" />
```
### 靜態
創建用於顯示目的的非交互日曆。
```html
<flux:calendar
static
value="2025-03-25"
size="xs"
:navigation="false"/>
```
### 最小/最大日期
通過設置最小和最大邊界來限制可選擇的日期範圍。
```html
<flux:calendar max="2025-03-25" />
```
您還可以使用方便的"today"簡寫：
```html
<!-- 阻止選擇今天之前的日期... -->
<flux:calendar min="today" />
<!-- 阻止選擇今天之後的日期... -->
<flux:calendar max="today" />
```
### 不可用日期
禁用特定日期被選中。用於封鎖假日、顯示已預訂日期或指示不可用時間段。
```html
<flux:calendar unavailable="2025-03-24,2025-03-26" />
```
### 今日快捷鍵
添加快捷按鈕以快速導航到今天的日期。查看不同月份時，它會跳轉到當前月份。已經查看當前月份時，它會選擇今天的日期。
```html
<flux:calendar with-today />
```
### 可選擇的頭部
通過使標題中的月份和年份可選擇來啟用快速導航。
```html
<flux:calendar selectable-header />
```
### 固定週數
在每個月中顯示一致數量的週。防止在導航不同週數的月份之間時佈局發生變化。
```html
<flux:calendar fixed-weeks />
```
### 開始日
默認情況下，一週的第一天將根據用戶的區域設置自動設置。您可以通過將start-day屬性設置為一週的任何一天來覆蓋此設置。
```html
<flux:calendar start-day="1" />
```
### 打開到
設置日曆將打開到的日期。否則，日曆默認為所選日期的月份，或當前月份。
```html
<flux:calendar open-to="2026-04-01" />
```
### 週數
顯示每週的週數。
```html
<flux:calendar week-numbers />
```
### 本地化
默認情況下，日曆將使用瀏覽器的區域設置（例如navigator.language）。
您可以通過將locale屬性設置為任何有效的區域設置字符串來覆蓋此行為：
```html
<flux:calendar locale="ja-JP" />
```
### DateRange對象
Flux提供了一個專門的Flux\DateRange對象，它擴展了原生的CarbonPeriod類。這個對象提供了許多便利的方法來輕鬆創建和管理日期範圍。
使用wire:model.live綁定range屬性到DateRange對象：
```html
<flux:calendar wire:model.live="range" />
```
在組件中，您可以將range屬性類型提示為DateRange對象：
```php
<?php
use Livewire\Component;
use Flux\DateRange;
class Dashboard extends Component {
public DateRange $range;
}
```
### 參數參考
#### flux:calendar
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將日曆綁定到Livewire屬性 |
| name | 日曆的name屬性。使用wire:model時自動設置 |
| value | 所選日期。格式取決於模式：單一日期(Y-m-d)、多個日期(逗號分隔的Y-m-d)或範圍(Y-m-d/Y-m-d) |
| mode | 選擇模式。選項：single (預設)、multiple、range |
| min | 最早可選日期。可以是日期字符串或"today" |
| max | 最晚可選日期。可以是日期字符串或"today" |
| size | 日曆大小。選項：base (預設)、xs、sm、lg、xl、2xl |
| months | 要顯示的月份數。預設：單一/多個模式為1，範圍模式為2 |
| min-range | 在範圍模式下可選擇的最小天數 |
| max-range | 在範圍模式下可選擇的最大天數 |
| navigation | 如果為false，隱藏月份導航控件。預設：true |
| static | 如果為true，使日曆為非交互式（僅顯示）。預設：false |
| multiple | 如果為true，啟用多日期選擇模式。預設：false |
| week-numbers | 如果為true，在日曆中顯示週數。預設：false |
| selectable-header | 如果為true，顯示月份和年份下拉列表以便快速導航。預設：false |
| with-today | 如果為true，顯示按鈕以快速導航到今天的日期。預設：false |
| with-inputs | 如果為true，在日曆頂部顯示日期輸入以進行手動日期輸入。預設：false |
| locale | 設置日曆的區域設置。例如：fr、en-US、ja-JP |
#### DateRange對象
當使用`mode="range"`時處理日期範圍的專用對象。
| 方法 | 說明 |
| --- | --- |
| $range->start() | 獲取開始日期作為Carbon實例 |
| $range->end() | 獲取結束日期作為Carbon實例 |
| $range->days() | 獲取範圍中的天數 |
| $range->contains(date) | 檢查範圍是否包含特定日期 |
| $range->length() | 獲取範圍的天數長度 |
| $range->toArray() | 獲取帶有start和end鍵的範圍數組 |
| $range->preset() | 獲取當前預設為DateRangePreset枚舉值（如果有） |
| 靜態方法 | 說明 |
| --- | --- |
| DateRange::today() | 創建今天的DateRange |
| DateRange::yesterday() | 創建昨天的DateRange |
| DateRange::thisWeek() | 創建當前週的DateRange |
| DateRange::lastWeek() | 創建上一週的DateRange |
| DateRange::last7Days() | 創建過去7天的DateRange |
| DateRange::thisMonth() | 創建當前月的DateRange |
| DateRange::lastMonth() | 創建上個月的DateRange |
| DateRange::thisYear() | 創建當前年的DateRange |
| DateRange::lastYear() | 創建上一年的DateRange |
| DateRange::yearToDate() | 創建從1月1日到今天的DateRange |
## Card 卡片
相關內容的容器，如表單、警報或數據列表。
### 基本用法
```html
<flux:card class="space-y-6">
<div>
<flux:heading size="lg">Log in to your account</flux:heading>
<flux:text class="mt-2">Welcome back!</flux:text>
</div>
<div class="space-y-6">
<flux:input label="Email" type="email" placeholder="Your email address" />
<flux:field>
<div class="mb-3 flex justify-between">
<flux:label>Password</flux:label>
<flux:link href="#" variant="subtle" class="text-sm">Forgot password?</flux:link>
</div>
<flux:input type="password" placeholder="Your password" />
<flux:error name="password" />
</flux:field>
</div>
<div class="space-y-2">
<flux:button variant="primary" class="w-full">Log in</flux:button>
<flux:button variant="ghost" class="w-full">Sign up for a new account</flux:button>
</div>
</flux:card>
```
### 小型卡片
使用小型卡片變體來顯示緊湊內容，如通知、警報或簡短摘要。
```html
<a href="#" aria-label="Latest on our blog">
<flux:card size="sm" class="hover:bg-zinc-50 dark:hover:bg-zinc-700">
<flux:heading class="flex items-center gap-2">Latest on our blog <flux:icon name="arrow-up-right" class="ml-auto text-zinc-400" variant="micro" /></flux:heading>
<flux:text class="mt-2">Stay up to date with our latest insights, tutorials, and product updates.</flux:text>
</flux:card>
</a>
```
### 簡單卡片
老實說，卡片就是一個帶有邊框和一些填充的div。
```html
<flux:card>
<flux:heading size="lg">Are you sure?</flux:heading>
<flux:text class="mt-2 mb-4">
<p>Your post will be deleted permanently.</p>
<p>This action cannot be undone.</p>
</flux:text>
<flux:button variant="danger">Delete</flux:button>
</flux:card>
```
### 參數參考
#### flux:card
| 插槽 | 說明 |
| --- | --- |
| default | 在卡片內顯示的內容。可以包括標題、文本、表單、按鈕和其他組件 |
| CSS | 說明 |
| --- | --- |
| class | 應用於卡片的額外CSS類。常見用途：space-y-6用於子元素之間的間距，max-w-md用於寬度控制，p-0用於移除填充 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-card | 應用於根元素以進行樣式設置和識別 |
## Callout 標註
突出顯示重要信息或引導用戶執行關鍵操作。
### 基本用法
```html
<flux:callout icon="clock">
<flux:callout.heading>Upcoming maintenance</flux:callout.heading>
<flux:callout.text>
Our servers will be undergoing scheduled maintenance this Sunday from 2 AM - 5 AM UTC. Some services may be temporarily unavailable.
<flux:callout.link href="#">Learn more</flux:callout.link>
</flux:callout.text>
</flux:callout>
```
### 標題內的圖標
為了更緊湊的佈局，可以將圖標放在標題內而不是根組件。
```html
<flux:callout>
<flux:callout.heading icon="newspaper">Policy update</flux:callout.heading>
<flux:callout.text>We've updated our Terms of Service and Privacy Policy. Please review them to stay informed.</flux:callout.text>
</flux:callout>
```
### 帶操作按鈕
向標註添加操作按鈕，為用戶提供明確的下一步。
```html
<flux:callout icon="clock">
<flux:callout.heading>Subscription expiring soon</flux:callout.heading>
<flux:callout.text>Your current plan will expire in 3 days. Renew now to avoid service interruption and continue accessing premium features.</flux:callout.text>
<x-slot name="actions">
<flux:button>Renew now</flux:button>
<flux:button variant="ghost" href="/pricing">View plans</flux:button>
</x-slot>
</flux:callout>
```
### 內聯操作
使用inline屬性內聯顯示操作。
```html
<flux:callout icon="cube" variant="secondary" inline>
<flux:callout.heading>Your package is delayed</flux:callout.heading>
<x-slot name="actions">
<flux:button>Track order -></flux:button>
<flux:button variant="ghost">Reschedule</flux:button>
</x-slot>
</flux:callout>
```
### 可關閉
使用controls插槽添加關閉按鈕，允許用戶關閉不再關心的標註。
```html
<flux:callout icon="bell" variant="secondary" inline x-data="{ visible: true }" x-show="visible">
<flux:callout.heading class="flex gap-2 @max-md:flex-col items-start">Upcoming meeting <flux:text>10:00 AM</flux:text></flux:callout.heading>
<x-slot name="controls">
<flux:button icon="x-mark" variant="ghost" x-on:click="visible = false" />
</x-slot>
</flux:callout>
```
### 變體
使用預定義的變體傳達特定的語氣或緊急程度。
```html
<flux:callout variant="secondary" icon="information-circle" heading="Your account has been successfully created." />
<flux:callout variant="success" icon="check-circle" heading="Your account is verified and ready to use." />
<flux:callout variant="warning" icon="exclamation-circle" heading="Please verify your account to unlock all features." />
<flux:callout variant="danger" icon="x-circle" heading="Something went wrong. Try again or contact support." />
```
### 顏色
使用color屬性更改標註的顏色以匹配您的用例。
```html
<flux:callout color="red" ... />
<flux:callout color="blue" ... />
<!-- 更多顏色選擇... -->
```
### 自定義圖標
使用圖標插槽使用自定義圖標以匹配您的品牌或特定用例。
```html
<flux:callout>
<x-slot name="icon">
<!-- 自定義圖標 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alarm-clock"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/></svg>
</x-slot>
<flux:callout.heading>Notification system updated</flux:callout.heading>
<flux:callout.text>
<p>We've improved our notification system to deliver alerts faster and more reliably.</p>
</flux:callout.text>
</flux:callout>
```
### 參數參考
#### flux:callout
| 屬性 | 說明 |
| --- | --- |
| icon | 顯示在標題旁邊的圖標名稱（例如clock） |
| icon:variant | 顯示在標題旁邊的圖標的變體（例如outline） |
| variant | 選項：secondary、success、warning、danger。預設：secondary |
| color | 自定義顏色（例如red、blue） |
| inline | 如果為true，操作將內聯顯示。預設：false |
| heading | flux:callout.heading的簡寫 |
| text | flux:callout.text的簡寫 |
#### 插槽
| 插槽 | 說明 |
| --- | --- |
| icon | 顯示在標題旁邊的自定義圖標 |
| actions | 標註內的按鈕或連結（flux:callout.button） |
| controls | 放置在標註右上角的額外UI元素（例如關閉按鈕） |
#### flux:callout.heading
| 屬性 | 說明 |
| --- | --- |
| icon | 將圖標移到標題內而不是標註根部 |
| icon:variant | 顯示在標題旁邊的圖標的變體（例如outline） |
#### flux:callout.link
| 屬性 | 說明 |
| --- | --- |
| href | 連結指向的URL |
| external | 如果為true，連結將在新標籤中打開。預設：false |
## Chart 圖表
Flux的Chart組件是一個輕量級、零依賴的工具，用於在您的Livewire應用程序中構建圖表。它設計得簡單但極其靈活，因此您可以根據自己的需要組裝和設置圖表的樣式。
### 區域圖
類似於折線圖，但在線下方有填充區域。非常適合顯示累計值或強調音量。
### 多條線
您可以通過包含多個<flux:chart.line>組件在同一圖表中繪製多條線。這有助於比較不同的數據系列。
### 即時摘要
Flux圖表支持即時摘要，當用戶懸停在圖表上時會更新。要啟用此功能，您可以在<flux:chart>組件中包含<flux:chart.summary>組件。
### 火花線
用於表格或儀表板的緊湊、單行圖表，用於快速視覺洞察。非常適合股價、內存使用或其他小規模趨勢。
### 圖表填充
默認情況下，圖表將以所有側面8px的填充渲染。這是為了防止圖表的溢出內容（如刻度標籤或描邊線）在容器邊緣被切斷。
### 軸刻度
您可以通過在<flux:chart.axis>組件上設置scale屬性來配置軸及其刻度的比例：
```html
<flux:chart.axis axis="y" scale="linear">
<!-- ... -->
</flux:chart.axis>
```
有三種可用的比例類型：
- categorical：用於類別數據，如名稱或類別。
- linear：用於數值數據，如股價或溫度。
- time：用於日期和時間數據。
### 軸線
默認情況下，軸不包括可見的基線。您可以使用<flux:chart.axis.line>在相應的軸內添加軸線：
```html
<flux:chart.svg>
<!-- ... -->
<flux:chart.axis axis="x">
<!-- 水平"X"軸線： -->
<flux:chart.axis.line />
</flux:chart.axis>
<flux:chart.axis axis="y">
<!-- 垂直"Y"軸線： -->
<flux:chart.axis.line />
</flux:chart.axis>
</flux:chart.svg>
```
### 零線
零線是表示軸上零值的線。只有當軸包含負值時，它才可見。
```html
<flux:chart.svg>
<!-- ... -->
<!-- 零線： -->
<flux:chart.zero-line />
</flux:chart.svg>
```
### 網格線
您可以通過將<flux:chart.axis.grid>組件添加到適當的軸來渲染水平和垂直網格線：
```html
<flux:chart.svg>
<!-- ... -->
<flux:chart.axis axis="x">
<!-- 垂直網格線： -->
<flux:chart.axis.grid />
</flux:chart.axis>
<flux:chart.axis axis="y">
<!-- 水平網格線： -->
<flux:chart.axis.grid />
</flux:chart.axis>
</flux:chart.svg>
```
### 刻度
您可以通過將<flux:chart.axis.mark>和/或<flux:chart.axis.tick>組件添加到適當的軸來渲染刻度標記線和標籤：
```html
<flux:chart.svg>
<!-- ... -->
<flux:chart.axis axis="x">
<!-- X軸刻度標記線： -->
<flux:chart.axis.mark />
<!-- X軸刻度標籤： -->
<flux:chart.axis.tick />
</flux:chart.axis>
<flux:chart.axis axis="y">
<!-- Y軸刻度標記線： -->
<flux:chart.axis.mark />
<!-- Y軸刻度標籤： -->
<flux:chart.axis.tick />
</flux:chart.axis>
</flux:chart.svg>
```
### 刻度格式化
刻度標籤可以使用format屬性格式化。
在底層，format屬性被傳遞給Intl.NumberFormat構造函數。
這意味著您可以使用Intl.NumberFormat構造函數可用的任何格式化選項。
```html
<flux:chart.svg>
<!-- ... -->
<!-- 格式化X軸刻度標籤以顯示月份和日期： -->
<flux:chart.axis axis="x" :format="['month' => 'long', 'day' => 'numeric']">
<!-- X軸刻度標籤： -->
<flux:chart.axis.tick />
</flux:chart.axis>
<!-- 格式化Y軸刻度標籤以顯示美元值： -->
<flux:chart.axis axis="y" :format="['style' => 'currency', 'currency' => 'USD']">
<!-- Y軸刻度標籤： -->
<flux:chart.axis.tick />
</flux:chart.axis>
</flux:chart.svg>
```
### 光標
當懸停在圖表上時添加垂直引導線以突出顯示特定點的值。可使用描邊樣式、顏色和虛線模式自定義。
要啟用光標，只需在<flux:chart.svg>內包含<flux:chart.cursor>：
```html
<flux:chart.svg>
<!-- ... -->
<flux:chart.cursor />
</flux:chart.svg>
```
### 工具提示
顯示懸停時的上下文數據。支持多個值和自定義格式以提高可讀性。
要啟用工具提示，請在<flux:chart>內包含<flux:chart.tooltip>：
```html
<flux:chart>
<flux:chart.svg>
<!-- ... -->
</flux:chart.svg>
<flux:chart.tooltip>
<flux:chart.tooltip.heading field="date" />
<flux:chart.tooltip.value field="visitors" label="Visitors" />
<flux:chart.tooltip.value field="views" label="Views" :format="['notation' => 'compact']" />
</flux:chart.tooltip>
</flux:chart>
```
### 圖例
識別圖表中的多個數據系列。每個圖例項目對應於一個不同的數據集。
```html
<flux:chart wire:model="data">
<flux:chart.viewport class="aspect-3/1">
<flux:chart.svg>
<flux:chart.line class="text-blue-500" field="visitors" />
<flux:chart.line class="text-red-500" field="views" />
</flux:chart.svg>
</flux:chart.viewport>
<div class="flex justify-center gap-4 pt-4">
<flux:chart.legend label="Visitors">
<flux:chart.legend.indicator class="bg-blue-400" />
</flux:chart.legend>
<flux:chart.legend label="Views">
<flux:chart.legend.indicator class="bg-red-400" />
</flux:chart.legend>
</div>
</flux:chart>
```
### 摘要
以粗體、易讀的格式顯示數據集中的單個值。非常適合關鍵績效指標。
```html
<flux:chart wire:model="data">
<flux:chart.summary>
<flux:chart.summary.value field="visitors" :format="['notation' => 'compact']" />
</flux:chart.summary>
<flux:chart.viewport class="aspect-[3/1]">
<!-- ... -->
</flux:chart.viewport>
</flux:chart>
```
## Checkbox 複選框
從一組中選擇一個或多個選項。
### 基本用法
```html
<flux:checkbox wire:model="terms" label="I agree to the terms and conditions" />
```
### 複選框組
垂直組織相關複選框列表。
使用複選框組時，您可以將wire:model添加到組元素或單個複選框。
```html
<flux:checkbox.group wire:model="notifications" label="Notifications">
<flux:checkbox label="Push notifications" value="push" checked />
<flux:checkbox label="Email" value="email" checked />
<flux:checkbox label="In-app alerts" value="app" />
<flux:checkbox label="SMS" value="sms" />
</flux:checkbox.group>
```
### 帶描述
將每個複選框的描述直接對齊在其標籤下方。
```html
<flux:checkbox.group wire:model="subscription" label="Subscription preferences">
<flux:checkbox checked
value="newsletter"
label="Newsletter"
description="Receive our monthly newsletter with the latest updates and offers."
/>
<flux:checkbox
value="updates"
label="Product updates"
description="Stay informed about new features and product updates."
/>
<flux:checkbox
value="invitations"
label="Event invitations"
description="Get invitations to our exclusive events and webinars."
/>
</flux:checkbox.group>
```
### 水平字段集
水平組織一組相關的複選框。
```html
<flux:fieldset>
<flux:legend>Languages</flux:legend>
<flux:description>Choose the languages you want to support.</flux:description>
<div class="flex gap-4 *:gap-x-2">
<flux:checkbox checked value="english" label="English" />
<flux:checkbox checked value="spanish" label="Spanish" />
<flux:checkbox value="french" label="French" />
<flux:checkbox value="german" label="German" />
</div>
</flux:fieldset>
```
### 全選
使用單個複選框控制一組複選框。
```html
<flux:checkbox.group>
<flux:checkbox.all />
<flux:checkbox checked />
<flux:checkbox />
<flux:checkbox />
</flux:checkbox.group>
```
### 已選中
默認將複選框標記為已選中。
```html
<flux:checkbox checked />
```
### 禁用
防止用戶與複選框交互和修改。
```html
<flux:checkbox disabled />
```
### 複選框卡片
標準複選框的帶邊框替代方案。
```html
<flux:checkbox.group wire:model="subscription" label="Subscription preferences" variant="cards" class="max-sm:flex-col">
<flux:checkbox checked
value="newsletter"
label="Newsletter"
description="Get the latest updates and offers."
/>
<flux:checkbox
value="updates"
label="Product updates"
description="Learn about new features and products."
/>
<flux:checkbox
value="invitations"
label="Event invitations"
description="Invitatations to exclusive events."
/>
</flux:checkbox.group>
```
### 垂直卡片
您可以通過簡單地將flex-col類添加到組容器來垂直排列一組複選框卡片。
```html
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">
<!-- ... -->
</flux:checkbox.group>
```
### 帶圖標的卡片
```html
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">
<flux:checkbox checked
value="newsletter"
icon="newspaper"
label="Newsletter"
description="Get the latest updates and offers."
/>
<!-- ... -->
</flux:checkbox.group>
```
### 自定義卡片內容
您可以通過flux:checkbox組件插槽組合自己的自定義卡片。
```html
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">
<flux:checkbox checked value="newsletter">
<flux:checkbox.indicator />
<div class="flex-1">
<flux:heading class="leading-4">Newsletter</flux:heading>
<flux:text size="sm" class="mt-2">Get the latest updates and offers.</flux:text>
</div>
</flux:checkbox>
<!-- ... -->
</flux:checkbox.group>
```
### 參數參考
#### flux:checkbox
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將複選框綁定到Livewire屬性 |
| name | 複選框的name屬性。使用wire:model時自動設置 |
| label | 顯示在複選框旁邊的標籤文本。提供時，將複選框包裝在具有相鄰標籤的結構中 |
| description | 顯示在複選框下方的幫助文本。與標籤一起提供時，出現在標籤和複選框之間 |
| value | 與複選框關聯的值。在組中使用時，當複選框被選中時，此值將包含在組的wire:model返回的數組中 |
| checked | 默認將複選框設置為選中狀態 |
| indeterminate | 將複選框設置為不確定狀態，用破折號而非對勾表示。適用於"全選"複選框，當只有部分項目被選中時 |
| disabled | 阻止用戶與複選框交互 |
| invalid | 對複選框應用錯誤樣式 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-checkbox | 應用於根元素以進行樣式設置和識別 |
| data-checked | 應用於複選框被選中時 |
| data-indeterminate | 應用於複選框處於不確定狀態時 |
#### flux:checkbox.group
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將複選框組綁定到Livewire屬性。該值將是所選複選框值的數組 |
| name | 複選框組的name屬性。使用wire:model時自動設置 |
| label | 顯示在複選框組上方的標籤文本。提供時，將組包裝在flux:field組件中，並帶有相鄰的flux:label組件 |
| description | 顯示在組標籤下方的幫助文本。與標籤一起提供時，出現在標籤和複選框之間 |
| variant | 組的視覺樣式。選項：default、cards |
| disabled | 阻止用戶與組中的所有複選框交互 |
| invalid | 對組中的所有複選框應用錯誤樣式 |
| 插槽 | 說明 |
| --- | --- |
| default | 要組合在一起的複選框。可以包括flux:checkbox、flux:checkbox.all和其他元素 |
#### flux:checkbox.all
一個特殊的複選框，控制其組內的所有複選框。當所有複選框都被選中時它變為選中，當沒有選中時變為未選中，當部分（但不是全部）被選中時變為不確定狀態。
| 屬性 | 說明 |
| --- | --- |
| label | 顯示在複選框旁邊的文本標籤 |
| description | 顯示在複選框下方的幫助文本 |
| disabled | 阻止用戶與複選框交互 |
## Command 命令面板
可搜索的命令列表。
### 基本用法
```html
<flux:command>
<flux:command.input placeholder="Search..." />
<flux:command.items>
<flux:command.item wire:click="..." icon="user-plus" kbd="⌘A">Assign to…</flux:command.item>
<flux:command.item wire:click="..." icon="document-plus">Create new file</flux:command.item>
<flux:command.item wire:click="..." icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item>
<flux:command.item wire:click="..." icon="book-open">Documentation</flux:command.item>
<flux:command.item wire:click="..." icon="newspaper">Changelog</flux:command.item>
<flux:command.item wire:click="..." icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item>
</flux:command.items>
</flux:command>
```
### 作為模態框
以模態框形式打開命令面板，以快速訪問常用命令。
```html
<flux:modal.trigger name="search" shortcut="cmd.k">
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />
</flux:modal.trigger>
<flux:modal name="search" variant="bare" class="w-full max-w-[30rem] my-[12vh] max-h-screen overflow-y-hidden">
<flux:command class="border-none shadow-lg inline-flex flex-col max-h-[76vh]">
<flux:command.input placeholder="Search..." closable />
<flux:command.items>
<flux:command.item icon="user-plus" kbd="⌘A">Assign to…</flux:command.item>
<flux:command.item icon="document-plus">Create new file</flux:command.item>
<flux:command.item icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item>
<flux:command.item icon="book-open">Documentation</flux:command.item>
<flux:command.item icon="newspaper">Changelog</flux:command.item>
<flux:command.item icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item>
</flux:command.items>
</flux:command>
</flux:modal>
```
### 參數參考
#### flux:command
| 屬性 | 說明 |
| --- | --- |
| data-flux-command | 應用於根元素以進行樣式設置和識別 |
#### flux:command.input
| 屬性 | 說明 |
| --- | --- |
| clearable | 如果為true，當輸入有內容時顯示清除按鈕 |
| closable | 如果為true，顯示關閉按鈕以關閉命令面板 |
| icon | 顯示在輸入開頭的圖標名稱。預設：magnifying-glass |
| placeholder | 輸入為空時顯示的佔位文本 |
#### flux:command.items
命令項目的容器。無可用屬性。
#### flux:command.item
| 屬性 | 說明 |
| --- | --- |
| icon | 顯示在項目開頭的圖標名稱 |
| icon:variant | 圖標的視覺樣式。選項：outline（預設）、solid、mini、micro |
| kbd | 顯示在項目末尾的鍵盤快捷鍵提示（例如⌘K） |
| data-flux-command-item | 應用於項目元素以進行樣式設置和識別 |
## Date picker 日期選擇器
允許用戶通過日曆覆蓋選擇日期或日期範圍。非常適合篩選數據或安排事件。
### 基本用法
```html
<flux:date-picker value="2025-03-25" />
```
您也可以使用wire:model將選擇綁定到Livewire屬性：
```html
<flux:date-picker wire:model="date" />
```
### 輸入觸發器
將日期選擇器附加到日期輸入以進行更精確的日期選擇控制。
```html
<flux:date-picker wire:model="date">
<x-slot name="trigger">
<flux:date-picker.input />
</x-slot>
</flux:date-picker>
```
### 範圍選擇器
啟用日期範圍選擇，用於報告、預訂系統或任何需要開始和結束日期的場景。
```html
<flux:date-picker mode="range" />
```
設置初始範圍，使用value屬性，其中開始和結束日期由斜線分隔：
```html
<flux:date-picker mode="range" value="2025-03-02/2025-03-06" />
```
### 範圍限制
控制可以選擇的日期範圍。
```html
<flux:date-picker mode="range" min-range="3" />
<flux:date-picker mode="range" max-range="10" />
```
### 帶輸入的範圍
為開始和結束日期使用單獨的輸入，為日期範圍選擇提供更清晰的界面。
```html
<flux:date-picker mode="range">
<x-slot name="trigger">
<div class="flex flex-col sm:flex-row gap-6 sm:gap-4">
<flux:date-picker.input label="Start" />
<flux:date-picker.input label="End" />
</div>
</x-slot>
</flux:date-picker>
```
### 預設範圍
允許用戶選擇常用範圍，如"最近7天"或"本月"。
```html
<flux:date-picker mode="range" with-presets />
```
您還可以使用presets屬性指定要顯示的預設範圍及其順序：
```html
<flux:date-picker
mode="range"
presets="today yesterday thisWeek last7Days thisMonth yearToDate allTime"
/>
```
### 今日快捷鍵
添加快捷按鈕以快速導航到今天的日期。
```html
<flux:date-picker with-today />
```
### 可選擇的頭部
通過使頭部中的月份和年份可選擇來啟用快速導航。
```html
<flux:date-picker selectable-header />
```
### 固定週數
在每個月中顯示一致數量的週。防止在導航不同週數的月份之間時佈局發生變化。
```html
<flux:date-picker fixed-weeks />
```
### 開始日
默認情況下，一週的第一天將根據用戶的區域設置自動設置。您可以通過將start-day屬性設置為一週的任何一天來覆蓋此設置。
```html
<flux:date-picker start-day="1" />
```
### 參數參考
#### flux:date-picker
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將日期選擇器綁定到Livewire屬性 |
| name | 日期選擇器的name屬性。使用wire:model時自動設置 |
| value | 所選日期。格式取決於模式：單一日期(Y-m-d)或範圍(Y-m-d/Y-m-d) |
| mode | 選擇模式。選項：single (預設)、range |
| min-range | 在範圍模式下可選擇的最小天數 |
| max-range | 在範圍模式下可選擇的最大天數 |
| min | 最早可選日期。可以是日期字符串或"today" |
| max | 最晚可選日期。可以是日期字符串或"today" |
| months | 要顯示的月份數。預設：單一模式為1，範圍模式為2 |
| label | 顯示在日期選擇器上方的標籤文本 |
| description | 顯示在日期選擇器下方的幫助文本 |
| description:trailing | 提供的描述將顯示在日期選擇器下方而非上方 |
| badge | 提供標籤時顯示在flux:label組件末尾的徽章文本 |
| placeholder | 未選擇日期時顯示的佔位文本。預設取決於模式 |
| size | 日曆日單元格的大小。選項：sm、default、lg、xl、2xl |
| week-numbers | 如果為true，在日曆中顯示週數 |
| selectable-header | 如果為true，顯示月份和年份下拉列表以便快速導航 |
| with-today | 如果為true，顯示按鈕以快速導航到今天的日期 |
| with-inputs | 如果為true，在日曆頂部顯示日期輸入以進行手動日期輸入 |
| with-confirmation | 如果為true，在應用所選日期前需要確認 |
| with-presets | 如果為true，顯示預設日期範圍。使用presets自定義可用選項 |
| presets | 以空格分隔的預設日期範圍列表。預設：today yesterday thisWeek last7Days thisMonth yearToDate allTime |
| clearable | 選擇日期時顯示清除按鈕 |
| disabled | 防止用戶與日期選擇器交互 |
| invalid | 對日期選擇器應用錯誤樣式 |
| locale | 設置日期選擇器的區域設置。例如：fr、en-US、ja-JP |
| 插槽 | 說明 |
| --- | --- |
| trigger | 打開日期選擇器的自定義觸發器元素。通常是flux:date-picker.input或flux:date-picker.button |
#### flux:date-picker.input
| 屬性 | 說明 |
| --- | --- |
| label | 顯示在輸入上方的標籤文本 |
| description | 顯示在輸入下方的幫助文本 |
| placeholder | 未選擇日期時顯示的佔位文本 |
| format | 顯示的日期格式字符串。預設：本地化格式 |
| clearable | 選擇日期時顯示清除按鈕 |
| disabled | 防止用戶與輸入交互 |
| invalid | 對輸入應用錯誤樣式 |
#### flux:date-picker.button
| 屬性 | 說明 |
| --- | --- |
| placeholder | 未選擇日期時顯示的文本 |
| size | 按鈕的大小。選項：sm、xs |
| clearable | 選擇日期時顯示清除按鈕 |
| disabled | 防止用戶與按鈕交互 |
| invalid | 對按鈕應用錯誤樣式 |
## Dropdown 下拉選單
可組合的下拉選單組件，可以處理簡單的導航選單和帶有複選框、單選框和子選單的複雜操作選單。
### 基本用法
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.item icon="plus">New post</flux:menu.item>
<flux:menu.separator />
<flux:menu.submenu heading="Sort by">
<flux:menu.radio.group>
<flux:menu.radio checked>Name</flux:menu.radio>
<flux:menu.radio>Date</flux:menu.radio>
<flux:menu.radio>Popularity</flux:menu.radio>
</flux:menu.radio.group>
</flux:menu.submenu>
<flux:menu.submenu heading="Filter">
<flux:menu.checkbox checked>Draft</flux:menu.checkbox>
<flux:menu.checkbox checked>Published</flux:menu.checkbox>
<flux:menu.checkbox>Archived</flux:menu.checkbox>
</flux:menu.submenu>
<flux:menu.separator />
<flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
```
### 定位
通過position和align屬性自定義下拉選單的位置。您可以首先傳遞基本位置：top、bottom、left和right，然後是對齊修飾符like start、center或end。
```html
<flux:dropdown position="top" align="start">
<!-- 更多位置... -->
<flux:dropdown position="right" align="center">
<flux:dropdown position="bottom" align="center">
<flux:dropdown position="left" align="end">
```
### 偏移和間隙
通過offset和gap屬性自定義下拉選單的偏移/間隙。這些屬性接受以像素為單位的值。
```html
<flux:dropdown offset="-15" gap="2">
```
### 鍵盤提示
向選單項目添加鍵盤快捷鍵提示，教會用戶如何更快地導航您的應用。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.item icon="pencil-square" kbd="⌘S">Save</flux:menu.item>
<flux:menu.item icon="document-duplicate" kbd="⌘D">Duplicate</flux:menu.item>
<flux:menu.item icon="trash" variant="danger" kbd="⌘⌫">Delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
```
### 複選框項目
選擇一個或多個選單選項。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Permissions</flux:button>
<flux:menu>
<flux:menu.checkbox wire:model="read" checked>Read</flux:menu.checkbox>
<flux:menu.checkbox wire:model="write" checked>Write</flux:menu.checkbox>
<flux:menu.checkbox wire:model="delete">Delete</flux:menu.checkbox>
</flux:menu>
</flux:dropdown>
```
### 單選項目
選擇單個選單選項。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Sort by</flux:button>
<flux:menu>
<flux:menu.radio.group wire:model="sortBy">
<flux:menu.radio checked>Latest activity</flux:menu.radio>
<flux:menu.radio>Date created</flux:menu.radio>
<flux:menu.radio>Most popular</flux:menu.radio>
</flux:menu.radio.group>
</flux:menu>
</flux:dropdown>
```
### 分組
用分隔線直觀地分組相關選單項目。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.item>View</flux:menu.item>
<flux:menu.item>Transfer</flux:menu.item>
<flux:menu.separator />
<flux:menu.item>Publish</flux:menu.item>
<flux:menu.item>Share</flux:menu.item>
<flux:menu.separator />
<flux:menu.item variant="danger">Delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
```
### 帶標題的分組
在標題下分組選項，使它們更容易被發現。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.group heading="Account">
<flux:menu.item>Profile</flux:menu.item>
<flux:menu.item>Permissions</flux:menu.item>
</flux:menu.group>
<flux:menu.group heading="Billing">
<flux:menu.item>Transactions</flux:menu.item>
<flux:menu.item>Payouts</flux:menu.item>
<flux:menu.item>Refunds</flux:menu.item>
</flux:menu.group>
<flux:menu.item>Logout</flux:menu.item>
</flux:menu>
</flux:dropdown>
```
### 子選單
嵌套子選單以獲得更緊湊的選單。
```html
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.submenu heading="Sort by">
<flux:menu.radio checked>Name</flux:menu.radio>
<flux:menu.radio>Date</flux:menu.radio>
<flux:menu.radio>Popularity</flux:menu.radio>
</flux:menu.submenu>
<flux:menu.submenu heading="Filter">
<flux:menu.checkbox checked>Draft</flux:menu.checkbox>
<flux:menu.checkbox checked>Published</flux:menu.checkbox>
<flux:menu.checkbox>Archived</flux:menu.checkbox>
</flux:menu.submenu>
<flux:menu.separator />
<flux:menu.item variant="danger">Delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
```
### 參數參考
#### flux:dropdown
| 屬性 | 說明 |
| --- | --- |
| position | 下拉選單的位置。選項：top、right、bottom（預設）、left |
| align | 下拉選單的對齊方式。選項：start、center、end。預設：start |
| offset | 與觸發元素的偏移量（以像素為單位）。預設：0 |
| gap | 觸發器和選單之間的間隙（以像素為單位）。預設：4 |
| data-flux-dropdown | 應用於根元素以進行樣式設置和識別 |
#### flux:menu
| 插槽 | 說明 |
| --- | --- |
| default | 選單項目、分隔符和子選單 |
| data-flux-menu | 應用於根元素以進行樣式設置和識別 |
#### flux:menu.item
| 屬性 | 說明 |
| --- | --- |
| icon | 顯示在項目開頭的圖標名稱 |
| icon:trailing | 顯示在項目末尾的圖標名稱 |
| icon:variant | 圖標的變體。選項：outline、solid、mini、micro |
| kbd | 顯示在項目末尾的鍵盤快捷鍵提示 |
| suffix | 顯示在項目末尾的文本 |
| variant | 項目的視覺樣式。選項：default、danger |
| disabled | 如果為true，防止與選單項目交互 |
| data-flux-menu-item | 應用於根元素以進行樣式設置和識別 |
| data-active | 應用於項目被懸停/活動時 |
#### flux:menu.submenu
| 屬性 | 說明 |
| --- | --- |
| heading | 顯示為子選單標題的文本 |
| icon | 顯示在子選單開頭的圖標名稱 |
| icon:trailing | 顯示在子選單末尾的圖標名稱 |
| icon:variant | 圖標的變體。選項：outline、solid、mini、micro |
| 插槽 | 說明 |
| --- | --- |
| default | 子選單項目（複選框、單選按鈕等） |
#### flux:menu.separator
水平線，分隔選單項目。
#### flux:menu.checkbox.group
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將複選框組綁定到Livewire屬性 |
| 插槽 | 說明 |
| --- | --- |
| default | 複選框 |
#### flux:menu.checkbox
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將複選框綁定到Livewire屬性 |
| checked | 如果為true，複選框默認被選中 |
| disabled | 如果為true，防止與複選框交互 |
| data-active | 應用於複選框被懸停/活動時 |
| data-checked | 應用於複選框被選中時 |
#### flux:menu.radio.group
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將單選組綁定到Livewire屬性 |
| 插槽 | 說明 |
| --- | --- |
| default | 單選按鈕 |
#### flux:menu.radio
| 屬性 | 說明 |
| --- | --- |
| checked | 如果為true，單選按鈕默認被選中 |
| disabled | 如果為true，防止與單選按鈕交互 |
| data-active | 應用於單選按鈕被懸停/活動時 |
| data-checked | 應用於單選按鈕被選中時 |
## Field 表單欄位
用標籤、描述和驗證封裝輸入元素。
### 基本用法
```html
<flux:field>
<flux:label>Email</flux:label>
<flux:input wire:model="email" type="email" />
<flux:error name="email" />
</flux:field>
```
### 簡寫屬性
因為以完整形式使用field組件可能會冗長且重複，所有flux中的表單控件都允許您直接傳遞label和description參數。在底層，它們將自動包裝在一個field中，並自動包含error組件。
```html
<flux:input wire:model="email" label="Email" type="email" />
```
### 帶尾部描述
將字段描述直接定位在輸入下方。
```html
<flux:field>
<flux:label>Password</flux:label>
<flux:input type="password" />
<flux:error name="password" />
<flux:description>Must be at least 8 characters long, include an uppercase letter, a number, and a special character.</flux:description>
</flux:field>
<!-- 替代簡寫語法... -->
<flux:input
type="password"
label="Password"
description:trailing="Must be at least 8 characters long, include an uppercase letter, a number, and a special character."
/>
```
### 帶徽章
徽章允許您使用諸如"必填"或"可選"等額外信息來增強字段，這些信息可能不是預期的。
```html
<flux:field>
<flux:label badge="Required">Email</flux:label>
<flux:input type="email" required />
<flux:error name="email" />
</flux:field>
<flux:field>
<flux:label badge="Optional">Phone number</flux:label>
<flux:input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999" />
<flux:error name="phone" />
</flux:field>
```
### 分割佈局
在同一行中水平顯示多個字段。
```html
<div class="grid grid-cols-2 gap-4">
<flux:input label="First name" placeholder="River" />
<flux:input label="Last name" placeholder="Porzio" />
</div>
```
### 字段集
使用fieldset和legend組件對相關字段進行分組。
```html
<flux:fieldset>
<flux:legend>Shipping address</flux:legend>
<div class="space-y-6">
<flux:input label="Street address line 1" placeholder="123 Main St" class="max-w-sm" />
<flux:input label="Street address line 2" placeholder="Apartment, studio, or floor" class="max-w-sm" />
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
<flux:input label="City" placeholder="San Francisco" />
<flux:input label="State / Province" placeholder="CA" />
<flux:input label="Postal / Zip code" placeholder="12345" />
<flux:select label="Country">
<option selected>United States</option>
<!-- ... -->
</flux:select>
</div>
</div>
</flux:fieldset>
```
### 參數參考
#### flux:field
| 屬性 | 說明 |
| --- | --- |
| variant | 視覺樣式變體。選項：block、inline。預設：block |
| 插槽 | 說明 |
| --- | --- |
| default | 表單控件元素（輸入、選擇等）及其相關標籤、描述和錯誤信息 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-field | 應用於根元素以進行樣式設置和識別 |
#### flux:label
| 屬性 | 說明 |
| --- | --- |
| badge | 顯示為徽章的可選文本（例如"必填"、"可選"） |
| 插槽 | 說明 |
| --- | --- |
| default | 標籤文本內容 |
#### flux:description
| 插槽 | 說明 |
| --- | --- |
| default | 描述性文本內容 |
#### flux:error
| 屬性 | 說明 |
| --- | --- |
| name | 顯示驗證錯誤的字段名稱 |
| message | 自定義錯誤信息內容（可選） |
| 插槽 | 說明 |
| --- | --- |
| default | 自定義錯誤信息內容（可選） |
#### flux:fieldset
| 屬性 | 說明 |
| --- | --- |
| legend | 字段集的標題文本 |
| description | 字段集的可選描述文本 |
| 插槽 | 說明 |
| --- | --- |
| default | 分組的表單字段及其相關圖例 |
#### flux:legend
| 插槽 | 說明 |
| --- | --- |
| default | 字段集的標題文本 |
## Heading 標題
為您的應用程序提供一致的標題組件。
### 基本用法
```html
<flux:heading>User profile</flux:heading>
<flux:text class="mt-2">This information will be displayed publicly.</flux:text>
```
### 尺寸
Flux提供三種不同的標題大小，應該涵蓋您應用中的大多數用例。
```html
<flux:heading>Default</flux:heading>
<flux:heading size="lg">Large</flux:heading>
<flux:heading size="xl">Extra large</flux:heading>
```
### 標題級別
控制將用於標題元素的標題級別：h1、h2、h3。沒有level屬性時，標題將默認為div。
```html
<flux:heading level="3">User profile</flux:heading>
<flux:text class="mt-2">This information will be displayed publicly.</flux:text>
```
### 參數參考
#### flux:heading
| 屬性 | 說明 |
| --- | --- |
| size | 標題大小。選項：base、lg、xl。預設：base |
| level | HTML標題級別。選項：1、2、3、4。預設：若未指定則渲染為div |
| accent | 如果為true，對標題應用重點顏色樣式 |
#### flux:text
| 屬性 | 說明 |
| --- | --- |
| size | 文本大小。選項：sm、base、lg、xl。預設：base |
## Icon 圖標
Flux使用優秀的Heroicons項目作為其圖標集。Heroicons是由Tailwind Labs團隊精心製作的一組美觀且實用的圖標。
### 變體
每個圖標有四種變體：outline（默認）、solid、mini和micro。
```html
<flux:icon.bolt /> <!-- 24px，輪廓 -->
<flux:icon.bolt variant="solid" /> <!-- 24px，填充 -->
<flux:icon.bolt variant="mini" /> <!-- 20px，填充 -->
<flux:icon.bolt variant="micro" /> <!-- 16px，填充 -->
```
### 尺寸
使用size-* Tailwind實用工具控制圖標大小（高度/寬度）。
避免調整圖標大小。每個變體都是專門為其默認大小設計的。
```html
<flux:icon.bolt class="size-12" />
<flux:icon.bolt class="size-10" />
<flux:icon.bolt class="size-8" />
```
### 顏色
您可以使用Tailwind的文本顏色實用工具自定義圖標的顏色。
```html
<flux:icon.bolt variant="solid" class="text-amber-500 dark:text-amber-300" />
```
### 加載旋轉器
Flux有一個特殊的加載旋轉器圖標，它不是Heroicons集合的一部分。您可以在通常使用標準圖標的任何地方使用這個特殊圖標。
### Lucide圖標
我們喜歡Heroicons，但我們承認它是一個相當有限的圖標集。如果您需要更多圖標，我們建議使用Lucide代替。
Flux提供了一個方便的artisan命令來將它們導入到您的項目中：
```
php artisan flux:icon crown grip-vertical github
```
### 自定義圖標
對於完全控制您的圖標，您可以在resources/views/flux/icon目錄中創建自己的Blade文件。
```
- resources
- views
- flux
- icon
- wink.blade.php
```
### 參數參考
#### flux:icon.*
所有圖標組件（如flux:icon.bolt、flux:icon.loading）共享相同的屬性和行為。
| 屬性 | 說明 |
| --- | --- |
| variant | 圖標的視覺樣式。選項：outline（預設）、solid、mini、micro |
| 類 | 說明 |
| --- | --- |
| size-* | 使用Tailwind的size實用工具控制圖標大小（例如size-8、size-12） |
| text-* | 使用Tailwind的文本顏色實用工具控制圖標顏色（例如text-blue-500） |
| 屬性 | 說明 |
| --- | --- |
| data-flux-icon | 應用於根SVG元素以進行樣式設置和識別 |
#### 圖標大小
| 大小 | 說明 |
| --- | --- |
| outline | 24x24像素（預設） |
| solid | 24x24像素 |
| mini | 20x20像素 |
| micro | 16x16像素 |
## Input 輸入框
[文檔中未提供，可能需要補充]
## Modal 對話框
在主頁面上層顯示內容。非常適合確認、警報和表單。
### 基本用法
```html
<flux:modal.trigger name="edit-profile">
<flux:button>Edit profile</flux:button>
</flux:modal.trigger>
<flux:modal name="edit-profile" class="md:w-96">
<div class="space-y-6">
<div>
<flux:heading size="lg">Update profile</flux:heading>
<flux:text class="mt-2">Make changes to your personal details.</flux:text>
</div>
<flux:input label="Name" placeholder="Your name" />
<flux:input label="Date of birth" type="date" />
<div class="flex">
<flux:spacer />
<flux:button type="submit" variant="primary">Save changes</flux:button>
</div>
</div>
</flux:modal>
```
### 唯一模態名稱
如果您在循環中放置模態，請確保動態生成唯一的模態名稱。否則，一個模態觸發器將觸發頁面上該名稱的所有模態，導致意外行為。
```html
@foreach ($users as $user)
<flux:modal :name="'edit-profile-'.$user->id">
...
</flux:modal>
@endforeach
```
### Livewire方法
除了在Blade模板中觸發模態外，您還可以直接從Livewire控制它們。
考慮Blade模板中的"confirm"模態，如下所示：
```html
<flux:modal name="confirm">
<!-- ... -->
</flux:modal>
```
現在您可以使用以下方法從Livewire組件打開和關閉此模態：
```php
<?php
class ShowPost extends \Livewire\Component {
public function delete() {
// 控制頁面上任何地方的"confirm"模態...
Flux::modal('confirm')->show();
Flux::modal('confirm')->close();
// 控制此Livewire組件內的"confirm"模態...
$this->modal('confirm')->show();
$this->modal('confirm')->close();
// 關閉頁面上的所有模態...
Flux::modals()->close();
}
}
```
### JavaScript方法
您也可以使用Flux的魔術方法直接從Alpine控制模態：
```html
<button x-on:click="$flux.modal('confirm').show()">
Open modal
</button>
<button x-on:click="$flux.modal('confirm').close()">
Close modal
</button>
<button x-on:click="$flux.modals().close()">
Close all modals
</button>
```
或者，您可以使用window.Flux全局對象從應用程序中的任何JavaScript控制模態：
```javascript
// 控制頁面上任何地方的"confirm"模態...
Flux.modal('confirm').show()
Flux.modal('confirm').close()
// 關閉頁面上的所有模態...
Flux.modals().close()
```
### 數據綁定
如果您願意，可以將Livewire屬性直接綁定到模態，以從Livewire組件控制其狀態。
```html
<flux:modal wire:model.self="showConfirmModal">
<!-- ... -->
</flux:modal>
```
將wire:model.self修飾符添加到wire:model屬性很重要，以防止嵌套元素分派會干擾模態狀態的輸入事件。
現在，您可以通過切換wire:model屬性從Livewire組件打開和關閉此模態。
```php
<?php
class ShowPost extends \Livewire\Component {
public $showConfirmModal = false;
public function delete() {
$this->showConfirmModal = true;
}
}
```
### 關閉事件
如果您需要在模態關閉後執行一些邏輯，可以像這樣註冊一個關閉監聽器：
```html
<flux:modal @close="someLivewireAction">
<!-- ... -->
</flux:modal>
```
您也可以使用wire:close或x-on:close（如果您願意使用這些語法）。
### 取消事件
如果您需要在模態被取消後執行一些邏輯，可以像這樣註冊一個取消監聽器：
```html
<flux:modal @cancel="someLivewireAction">
<!-- ... -->
</flux:modal>
```
您也可以使用wire:cancel或x-on:cancel（如果您願意使用這些語法）。
### 禁用點擊外部
默認情況下，點擊模態外部將關閉它。如果您要禁用此行為，可以使用:dismissible="false"屬性。
```html
<flux:modal :dismissible="false">
<!-- ... -->
</flux:modal>
```
### 確認
在執行危險操作前提示用戶確認。
```html
<flux:modal.trigger name="delete-profile">
<flux:button variant="danger">Delete</flux:button>
</flux:modal.trigger>
<flux:modal name="delete-profile" class="min-w-[22rem]">
<div class="space-y-6">
<div>
<flux:heading size="lg">Delete project?</flux:heading>
<flux:text class="mt-2">
<p>You''re about to delete this project.</p>
<p>This action cannot be reversed.</p>
</flux:text>
</div>
<div class="flex gap-2">
<flux:spacer />
<flux:modal.close>
<flux:button variant="ghost">Cancel</flux:button>
</flux:modal.close>
<flux:button type="submit" variant="danger">Delete project</flux:button>
</div>
</div>
</flux:modal>
```
### 飛出窗口
使用"flyout"變體獲得更錨定且長表單的對話框。
```html
<flux:modal.trigger name="edit-profile">
<flux:button>Edit profile</flux:button>
</flux:modal.trigger>
<flux:modal name="edit-profile" variant="flyout">
<div class="space-y-6">
<div>
<flux:heading size="lg">Update profile</flux:heading>
<flux:text class="mt-2">Make changes to your personal details.</flux:text>
</div>
<flux:input label="Name" placeholder="Your name" />
<flux:input label="Date of birth" type="date" />
<div class="flex">
<flux:spacer />
<flux:button type="submit" variant="primary">Save changes</flux:button>
</div>
</div>
</flux:modal>
```
### 飛出窗口定位
默認情況下，飛出窗口將從右側打開。您可以通過在position屬性中傳遞"left"或"bottom"來更改此行為。
```html
<flux:modal variant="flyout" position="left">
<!-- ... -->
</flux:modal>
```
### 參數參考
#### flux:modal
| 屬性 | 說明 |
| --- | --- |
| name | 模態的唯一標識符。使用觸發器時必需 |
| variant | 模態的視覺樣式。選項：default、flyout、bare |
| position | 對於飛出模態，它們打開的方向。選項：right（預設）、left、bottom |
| dismissible | 如果為false，防止通過點擊外部關閉模態。預設：true |
| wire:model | 可選的Livewire屬性，用於綁定模態的打開狀態 |
| 事件 | 說明 |
| --- | --- |
| close | 在模態以任何方式關閉時觸發 |
| cancel | 在通過點擊外部或按下Escape鍵關閉模態時觸發 |
| 插槽 | 說明 |
| --- | --- |
| default | 模態內容 |
| 類 | 說明 |
| --- | --- |
| w-* | 常見用途：md:w-96控制寬度 |
#### flux:modal.trigger
| 屬性 | 說明 |
| --- | --- |
| name | 要觸發的模態名稱。必須與模態的名稱匹配 |
| shortcut | 打開模態的鍵盤快捷鍵（例如cmd.k） |
| 插槽 | 說明 |
| --- | --- |
| default | 觸發元素（如按鈕） |
#### flux:modal.close
| 插槽 | 說明 |
| --- | --- |
| default | 關閉觸發元素（如按鈕） |
#### Flux::modal()
用於從Livewire組件控制模態的PHP方法。
| 參數 | 說明 |
| --- | --- |
| default/name | 要控制的模態名稱 |
| 方法 | 說明 |
| --- | --- |
| close() | 關閉模態 |
#### Flux::modals()
用於控制頁面上所有模態的PHP方法。
| 方法 | 說明 |
| --- | --- |
| close() | 關閉頁面上的所有模態 |
#### $flux.modal()
用於控制模態的Alpine.js魔術方法。
| 參數 | 說明 |
| --- | --- |
| default/name | 要控制的模態名稱 |
| 方法 | 說明 |
| --- | --- |
| show() | 顯示模態 |
| close() | 關閉模態 |
## Navbar 導航欄
垂直或水平排列導航鏈接。
### 基本用法
```html
<flux:navbar>
<flux:navbar.item href="#">Home</flux:navbar.item>
<flux:navbar.item href="#">Features</flux:navbar.item>
<flux:navbar.item href="#">Pricing</flux:navbar.item>
<flux:navbar.item href="#">About</flux:navbar.item>
</flux:navbar>
```
### 檢測當前頁面
導航欄和導航列將嘗試根據傳入的href屬性自動檢測和標記當前頁面。但是，如果您需要完全控制，可以直接將current屬性傳遞給項目。
```html
<flux:navbar.item href="/" current>Home</flux:navbar.item>
<flux:navbar.item href="/" :current="false">Home</flux:navbar.item>
<flux:navbar.item href="/" :current="request()->is('/')">Home</flux:navbar.item>
```
### 帶圖標
添加前導圖標以提供視覺上下文。
```html
<flux:navbar>
<flux:navbar.item href="#" icon="home">Home</flux:navbar.item>
<flux:navbar.item href="#" icon="puzzle-piece">Features</flux:navbar.item>
<flux:navbar.item href="#" icon="currency-dollar">Pricing</flux:navbar.item>
<flux:navbar.item href="#" icon="user">About</flux:navbar.item>
</flux:navbar>
```
### 帶徽章
使用badge屬性為導航欄項目添加尾部徽章。
```html
<flux:navbar>
<flux:navbar.item href="#">Home</flux:navbar.item>
<flux:navbar.item href="#" badge="12">Inbox</flux:navbar.item>
<flux:navbar.item href="#">Contacts</flux:navbar.item>
<flux:navbar.item href="#" badge="Pro" badge-color="lime">Calendar</flux:navbar.item>
</flux:navbar>
```
### 下拉導航
將多個導航項目濃縮為單個下拉選單，以節省空間並分組相關項目。
```html
<flux:navbar>
<flux:navbar.item href="#">Dashboard</flux:navbar.item>
<flux:navbar.item href="#">Transactions</flux:navbar.item>
<flux:dropdown>
<flux:navbar.item icon:trailing="chevron-down">Account</flux:navbar.item>
<flux:navmenu>
<flux:navmenu.item href="#">Profile</flux:navmenu.item>
<flux:navmenu.item href="#">Settings</flux:navmenu.item>
<flux:navmenu.item href="#">Billing</flux:navmenu.item>
</flux:navmenu>
</flux:dropdown>
</flux:navbar>
```
### 垂直導航
使用navlist組件垂直排列您的導航欄。
```html
<flux:navlist class="w-64">
<flux:navlist.item href="#" icon="home">Home</flux:navlist.item>
<flux:navlist.item href="#" icon="puzzle-piece">Features</flux:navlist.item>
<flux:navlist.item href="#" icon="currency-dollar">Pricing</flux:navlist.item>
<flux:navlist.item href="#" icon="user">About</flux:navlist.item>
</flux:navlist>
```
### 導航列分組
分組相關導航項目。
```html
<flux:navlist>
<flux:navlist.group heading="Account" class="mt-4">
<flux:navlist.item href="#">Profile</flux:navlist.item>
<flux:navlist.item href="#">Settings</flux:navlist.item>
<flux:navlist.item href="#">Billing</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>
```
### 可摺疊組
使用expandable屬性將相關導航項目分組為可摺疊部分。
```html
<flux:navlist class="w-64">
<flux:navlist.item href="#" icon="home">Dashboard</flux:navlist.item>
<flux:navlist.item href="#" icon="list-bullet">Transactions</flux:navlist.item>
<flux:navlist.group heading="Account" expandable>
<flux:navlist.item href="#">Profile</flux:navlist.item>
<flux:navlist.item href="#">Settings</flux:navlist.item>
<flux:navlist.item href="#">Billing</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>
```
如果您希望組默認為摺疊狀態，可以使用expanded屬性：
```html
<flux:navlist.group heading="Account" expandable :expanded="false">
```
### 導航列徽章
使用badge屬性顯示與導航列項目相關的額外信息。
```html
<flux:navlist class="w-64">
<flux:navlist.item href="#" icon="home">Home</flux:navlist.item>
<flux:navlist.item href="#" icon="envelope" badge="12">Inbox</flux:navlist.item>
<flux:navlist.item href="#" icon="user-group">Contacts</flux:navlist.item>
<flux:navlist.item href="#" icon="calendar-days" badge="Pro" badge-color="lime">Calendar</flux:navlist.item>
</flux:navlist>
```
### 參數參考
#### flux:navbar
| 插槽 | 說明 |
| --- | --- |
| default | 導航項目 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-navbar | 應用於根元素以進行樣式設置和識別 |
#### flux:navbar.item
| 屬性 | 說明 |
| --- | --- |
| href | 項目鏈接到的URL |
| current | 如果為true，對項目應用活動樣式。如果未指定，則根據當前URL自動檢測 |
| icon | 顯示在項目開頭的圖標名稱 |
| icon:trailing | 顯示在項目末尾的圖標名稱 |
| 屬性 | 說明 |
| --- | --- |
| data-current | 應用於項目活動/當前時 |
#### flux:navlist
| 插槽 | 說明 |
| --- | --- |
| default | 導航項目和組 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-navlist | 應用於根元素以進行樣式設置和識別 |
#### flux:navlist.item
| 屬性 | 說明 |
| --- | --- |
| href | 項目鏈接到的URL |
| current | 如果為true，對項目應用活動樣式。如果未指定，則根據當前URL自動檢測 |
| icon | 顯示在項目開頭的圖標名稱 |
| 屬性 | 說明 |
| --- | --- |
| data-current | 應用於項目活動/當前時 |
#### flux:navlist.group
| 屬性 | 說明 |
| --- | --- |
| heading | 顯示為組標題的文本 |
| expandable | 如果為true，使組可摺疊 |
| expanded | 如果為true，在可摺疊時默認展開組 |
| 插槽 | 說明 |
| --- | --- |
| default | 組的導航項目 |
## Pagination 分頁
顯示一系列按鈕以瀏覽項目列表。
### 基本用法
```html
<!-- $orders = Order::paginate() -->
<flux:pagination :paginator="$orders" />
```
### 簡單分頁器
使用簡單分頁器處理大型數據集，其中計算結果總數可能成本高昂。簡單分頁器提供"上一頁"和"下一頁"按鈕，而不顯示頁面總數或記錄數。
```html
<!-- $orders = Order::simplePaginate() -->
<flux:pagination :paginator="$orders" />
```
### 大結果集
處理大型結果集時，分頁組件會自動適應以顯示合理數量的頁面鏈接。它顯示第一頁和最後一頁，以及當前頁面周圍的一個窗口，並為任何間隙添加省略號，以確保高效瀏覽眾多頁面。
```html
<!-- $orders = Order::paginate(5) -->
<flux:pagination :paginator="$orders" />
```
### 參數參考
#### flux:pagination
| 屬性 | 說明 |
| --- | --- |
| paginator | 要顯示的分頁器實例 |
## Radio 單選框
從一組互斥選項中選擇一個。非常適合單一選擇問題和設置。
### 基本用法
```html
<flux:radio.group wire:model="payment" label="Select your payment method">
<flux:radio value="cc" label="Credit Card" checked />
<flux:radio value="paypal" label="Paypal" />
<flux:radio value="ach" label="Bank transfer" />
</flux:radio.group>
```
### 帶描述
將每個單選按鈕的描述直接對齊在其標籤下方。
```html
<flux:radio.group label="Role">
<flux:radio
name="role"
value="administrator"
label="Administrator"
description="Administrator users can perform any action."
checked
/>
<flux:radio
name="role"
value="editor"
label="Editor"
description="Editor users have the ability to read, create, and update."
/>
<flux:radio
name="role"
value="viewer"
label="Viewer"
description="Viewer users only have the ability to read. Create, and update are restricted."
/>
</flux:radio.group>
```
### 在字段集中
在字段集內分組單選輸入，並為每個單選選項提供更多上下文描述。
```html
<flux:fieldset>
<flux:legend>Role</flux:legend>
<flux:radio.group>
<flux:radio
value="administrator"
label="Administrator"
description="Administrator users can perform any action."
checked
/>
<flux:radio
value="editor"
label="Editor"
description="Editor users have the ability to read, create, and update."
/>
<flux:radio
value="viewer"
label="Viewer"
description="Viewer users only have the ability to read. Create, and update are restricted."
/>
</flux:radio.group>
</flux:fieldset>
```
### 分段式
標準單選按鈕的更緊湊替代方案。
```html
<flux:radio.group wire:model="role" label="Role" variant="segmented">
<flux:radio label="Admin" />
<flux:radio label="Editor" />
<flux:radio label="Viewer" />
</flux:radio.group>
```
您也可以使用size="sm"屬性使單選按鈕更小。
```html
<flux:radio.group wire:model="role" label="Role" variant="segmented" size="sm">
<flux:radio label="Admin" />
<flux:radio label="Editor" />
<flux:radio label="Viewer" />
</flux:radio.group>
```
### 帶圖標的分段式
將分段式單選按鈕與圖標前綴結合使用。
```html
<flux:radio.group wire:model="role" variant="segmented">
<flux:radio label="Admin" icon="wrench" />
<flux:radio label="Editor" icon="pencil-square" />
<flux:radio label="Viewer" icon="eye" />
</flux:radio.group>
```
### 單選卡片
標準單選按鈕的帶邊框替代方案。
```html
<flux:radio.group wire:model="shipping" label="Shipping" variant="cards" class="max-sm:flex-col">
<flux:radio value="standard" label="Standard" description="4-10 business days" checked />
<flux:radio value="fast" label="Fast" description="2-5 business days" />
<flux:radio value="next-day" label="Next day" description="1 business day" />
</flux:radio.group>
```
您可以通過根據視口有條件地應用flex-col來在垂直和水平卡片佈局之間切換。
```html
<flux:radio.group ... class="max-sm:flex-col">
<!-- ... -->
</flux:radio.group>
```
### 垂直卡片
您可以通過簡單地將flex-col類添加到組容器來垂直排列一組單選卡片。
```html
<flux:radio.group label="Shipping" variant="cards" class="flex-col">
<flux:radio value="standard" label="Standard" description="4-10 business days" />
<flux:radio value="fast" label="Fast" description="2-5 business days" />
<flux:radio value="next-day" label="Next day" description="1 business day" />
</flux:radio.group>
```
### 帶圖標的卡片
```html
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col">
<flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" />
<flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" />
<flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" />
</flux:radio.group>
```
### 無指示器的卡片
為了更整潔的外觀，您可以使用:indicator="false"移除單選指示器。
```html
<flux:radio.group label="Shipping" variant="cards" :indicator="false" class="max-sm:flex-col">
<flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" />
<flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" />
<flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" />
</flux:radio.group>
```
### 自定義卡片內容
您可以通過flux:radio組件插槽組合自己的自定義卡片。
```html
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col">
<flux:radio value="standard" checked>
<flux:radio.indicator />
<div class="flex-1">
<flux:heading class="leading-4">Standard</flux:heading>
<flux:text size="sm" class="mt-2">4-10 business days</flux:text>
</div>
</flux:radio>
<flux:radio value="fast">
<flux:radio.indicator />
<div class="flex-1">
<flux:heading class="leading-4">Fast</flux:heading>
<flux:text size="sm" class="mt-2">2-5 business days</flux:text>
</div>
</flux:radio>
<flux:radio value="next-day">
<flux:radio.indicator />
<div class="flex-1">
<flux:heading class="leading-4">Next day</flux:heading>
<flux:text size="sm" class="mt-2">1 business day</flux:text>
</div>
</flux:radio>
</flux:radio.group>
```
### 參數參考
#### flux:radio.group
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將單選組選擇綁定到Livewire屬性 |
| name | 單選組的name屬性。使用wire:model時自動設置 |
| label | 顯示在單選組上方的標籤文本 |
| description | 顯示在單選組下方的幫助文本 |
| variant | 組的視覺樣式。選項：default、segmented、cards |
| invalid | 對單選組應用錯誤樣式 |
| 插槽 | 說明 |
| --- | --- |
| default | 要分組在一起的單選按鈕 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-radio-group | 應用於根元素以進行樣式設置和識別 |
#### flux:radio
| 屬性 | 說明 |
| --- | --- |
| label | 顯示在單選按鈕上方的標籤文本 |
| description | 顯示在單選按鈕下方的幫助文本 |
| value | 在組中使用時與單選按鈕關聯的值 |
| checked | 如果為true，單選按鈕默認被選中 |
| disabled | 防止用戶與單選按鈕交互 |
| icon | 顯示的圖標名稱（用於分段變體） |
| 插槽 | 說明 |
| --- | --- |
| default | 卡片變體的自定義內容 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-radio | 應用於根元素以進行樣式設置和識別 |
| data-checked | 應用於單選按鈕被選中時 |
#### flux:radio.indicator
用於卡片變體中自定義單選按鈕佈局。
## Rich text editor 富文本編輯器
基於[ProseMirror](https://prosemirror.net/)和[Tiptap](https://tiptap.dev/)構建的基本富文本編輯器。
由於大型外部依賴，編輯器的JavaScript不包含在核心Flux包中。當您使用flux:editor組件時，它將按需作為單獨的JS文件加載。
### 基本用法
```html
<flux:editor wire:model="content" label="…" description="…" />
```
### 配置項目
您可以通過將空格分隔的項目列表傳遞給toolbar屬性來配置顯示哪些工具欄項目以及它們的順序。
```html
<flux:editor toolbar="heading | bold italic underline | align ~ undo redo" />
```
您可能已經注意到工具欄配置中的|和~字符。這些是分隔符和空格的簡寫。
以下工具欄項目可用：
* heading
* bold
* italic
* strike
* underline
* bullet
* ordered
* blockquote
* subscript
* superscript
* highlight
* link
* code
* undo
* redo
### 自定義項目
您可以通過向項目的resources/views/flux/editor目錄添加新文件來添加自己的工具欄項目。
以下是blade文件中自定義"複製到剪貼板"項目的例子：
```php
<flux:tooltip content="{{ __('Copy to clipboard') }}" class="contents">
<flux:editor.button x-on:click="navigator.clipboard?.writeText($el.closest('[data-flux-editor]').value); $el.setAttribute('data-copied', ''); setTimeout(() => $el.removeAttribute('data-copied'), 2000)">
<flux:icon.clipboard variant="outline" class="[[data-copied]_&]:hidden size-5!" />
<flux:icon.clipboard-document-check variant="outline" class="hidden [[data-copied]_&]:block size-5!" />
</flux:editor.button>
</flux:tooltip>
```
### 自定義化
如果您有更深入的自定義需求，可以組合自己的編輯器組件。以下是在編輯器工具欄中放置自定義下拉選單的例子：
```html
<flux:editor>
<flux:editor.toolbar>
<flux:editor.heading />
<flux:editor.separator />
<flux:editor.bold />
<flux:editor.italic />
<flux:editor.strike />
<flux:editor.separator />
<flux:editor.bullet />
<flux:editor.ordered />
<flux:editor.blockquote />
<flux:editor.separator />
<flux:editor.link />
<flux:editor.separator />
<flux:editor.align />
<flux:editor.spacer />
<flux:dropdown position="bottom end" offset="-15">
<flux:editor.button icon="ellipsis-horizontal" tooltip="More" />
<flux:menu>
<flux:menu.item wire:click="…" icon="arrow-top-right-on-square">Preview</flux:menu.item>
<flux:menu.item wire:click="…" icon="arrow-down-tray">Export</flux:menu.item>
<flux:menu.item wire:click="…" icon="share">Share</flux:menu.item>
</flux:menu>
</flux:dropdown>
</flux:editor.toolbar>
<flux:editor.content />
</flux:editor>
```
### 高度
默認情況下，編輯器的最小高度為200px，最大高度為500px。如果您想自定義此行為，可以使用Tailwind實用工具針對內容插槽並設置自己的最小/最大高度和溢出行為。
```html
<flux:editor class="**:data-[slot=content]:min-h-[100px]" />
```
### 快捷鍵
Flux的編輯器使用Tiptap的默認快捷鍵，這些快捷鍵在大多數富文本編輯器中都很常見。
| 操作 | Windows/Linux | Mac |
| --- | --- | --- |
| 應用段落樣式 | Ctrl+Alt+0 | Cmd+Alt+0 |
| 應用標題級別1 | Ctrl+Alt+1 | Cmd+Alt+1 |
| 應用標題級別2 | Ctrl+Alt+2 | Cmd+Alt+2 |
| 應用標題級別3 | Ctrl+Alt+3 | Cmd+Alt+3 |
| 粗體 | Ctrl+B | Cmd+B |
| 斜體 | Ctrl+I | Cmd+I |
| 下劃線 | Ctrl+U | Cmd+U |
| 刪除線 | Ctrl+Shift+X | Cmd+Shift+X |
| 項目符號列表 | Ctrl+Shift+8 | Cmd+Shift+8 |
| 有序列表 | Ctrl+Shift+7 | Cmd+Shift+7 |
| 引用塊 | Ctrl+Shift+B | Cmd+Shift+B |
| 代碼 | Ctrl+E | Cmd+E |
| 高亮 | Ctrl+Shift+H | Cmd+Shift+H |
| 左對齊 | Ctrl+Shift+L | Cmd+Shift+L |
| 居中對齊 | Ctrl+Shift+E | Cmd+Shift+E |
| 右對齊 | Ctrl+Shift+R | Cmd+Shift+R |
| 不帶格式粘貼 | Ctrl+Shift+V | Cmd+Shift+V |
| 添加換行 | Ctrl+Shift+Enter | Cmd+Shift+Enter |
| 撤銷 | Ctrl+Z | Cmd+Z |
| 重做 | Ctrl+Shift+Z | Cmd+Shift+Z |
### Markdown語法
雖然Flux的編輯器本身不是markdown編輯器，但它允許您在創作內容時使用markdown語法來觸發樣式更改。
| Markdown | 操作 |
| --- | --- |
| # | 應用標題級別1 |
| ## | 應用標題級別2 |
| ### | 應用標題級別3 |
| ** | 粗體 |
| * | 斜體 |
| ~~ | 刪除線 |
| - | 項目符號列表 |
| 1. | 有序列表 |
| > | 引用塊 |
| ` | 內聯代碼 |
| ``` | 代碼塊 |
| ```? | 帶類的代碼塊(class="language-?") |
| --- | 水平線 |
### 參數參考
#### flux:editor
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將編輯器綁定到Livewire屬性 |
| name | 編輯器的name屬性。使用wire:model時自動設置 |
| value | 編輯器的初始內容。在不使用wire:model綁定時使用 |
| label | 顯示在編輯器上方的標籤文本 |
| description | 顯示在編輯器下方的幫助文本 |
| description:trailing | 提供的描述將顯示在編輯器下方而非上方 |
| badge | 提供標籤時顯示在flux:label組件末尾的徽章文本 |
| placeholder | 編輯器為空時顯示的佔位文本 |
| toolbar | 要顯示的工具欄項目的空格分隔列表。使用\|作為分隔符，~作為空格。默認情況下，包括heading、bold、italic、strike、bullet、ordered、blockquote、link和align工具 |
| disabled | 防止用戶與編輯器交互 |
| invalid | 對編輯器應用錯誤樣式 |
| 插槽 | 說明 |
| --- | --- |
| default | 編輯器內容和工具欄組件。如果省略，將使用標準工具欄和空白內容區域 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-editor | 應用於根元素以進行樣式設置和識別 |
#### flux:editor.toolbar
| 屬性 | 說明 |
| --- | --- |
| items | 要顯示的工具欄項目的空格分隔列表。使用\|作為分隔符，~作為空格。若未提供，則顯示默認工具欄 |
| 插槽 | 說明 |
| --- | --- |
| default | 工具欄項目、分隔符和空格。使用此插槽創建完全自定義的工具欄 |
#### flux:editor.button
| 屬性 | 說明 |
| --- | --- |
| icon | 按鈕中顯示的圖標名稱 |
| iconVariant | 要顯示的圖標變體。選項：mini、micro、outline。默認：mini（無插槽）或micro（有插槽） |
| tooltip | 懸停按鈕時顯示在提示框中的文本 |
| disabled | 防止與按鈕交互 |
| 插槽 | 說明 |
| --- | --- |
| default | 在按鈕內顯示的內容。如果與圖標一起提供，圖標將顯示在此內容之前 |
#### flux:editor.content
| 插槽 | 說明 |
| --- | --- |
| default | 編輯器的初始HTML內容。此內容將由編輯器處理和管理 |
#### 工具欄項目
可以在`toolbar`屬性中引用或直接在自定義工具欄中使用的可用工具欄項目。
| 組件 | 說明 |
| --- | --- |
| heading | 標題級別選擇器 |
| bold | 粗體文本格式 |
| italic | 斜體文本格式 |
| strike | 刪除線文本格式 |
| underline | 下劃線文本格式 |
| bullet | 項目符號列表 |
| ordered | 有序列表 |
| blockquote | 引用塊格式 |
| code | 代碼塊格式 |
| link | 鏈接插入 |
| align | 文本對齊選項 |
| undo | 撤銷上次操作 |
| redo | 重做上次操作 |
## Select 選擇框
從下拉列表中選擇單個選項。
### 基本用法
```html
<flux:select wire:model="industry" placeholder="Choose industry...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 小型
更緊湊佈局的較小選擇元素。
```html
<flux:select size="sm" placeholder="Choose industry...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 自定義選擇
瀏覽器原生選擇元素的替代方案。通常在需要自定義選項樣式（如圖標、圖像和其他處理）時使用。
```html
<flux:select variant="listbox" placeholder="Choose industry...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 按鈕插槽
如果您需要完全控制用於觸發自定義選擇的按鈕，可以使用按鈕插槽自行渲染它。
```html
<flux:select variant="listbox">
<x-slot name="button">
<flux:select.button class="rounded-full!" placeholder="Choose industry..." :invalid="$errors->has('...')" />
</x-slot>
<flux:select.option>Photography</flux:select.option>
...
</flux:select>
```
### 可清除
如果您希望使所選值可清除，可以使用clearable屬性在輸入右側添加"x"按鈕：
```html
<flux:select variant="listbox" clearable>
...
</flux:select>
```
### 帶圖像/圖標的選項
使用自定義listbox選擇而非原生<select>元素的一個明顯優勢是現在可以向選項添加圖標和圖像。
```html
<flux:select variant="listbox" placeholder="Select role...">
<flux:select.option>
<div class="flex items-center gap-2">
<flux:icon.shield-check variant="mini" class="text-zinc-400" /> Owner
</div>
</flux:select.option>
<flux:select.option>
<div class="flex items-center gap-2">
<flux:icon.key variant="mini" class="text-zinc-400" /> Administrator
</div>
</flux:select.option>
<flux:select.option>
<div class="flex items-center gap-2">
<flux:icon.user variant="mini" class="text-zinc-400" /> Member
</div>
</flux:select.option>
<flux:select.option>
<div class="flex items-center gap-2">
<flux:icon.eye variant="mini" class="text-zinc-400" /> Viewer
</div>
</flux:select.option>
</flux:select>
```
### 可搜索選擇
可搜索選擇變體使用戶更容易導航大型選項列表。
```html
<flux:select variant="listbox" searchable placeholder="Choose industries...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 搜索插槽
如果您需要完全控制listbox內的搜索字段，可以使用搜索插槽自行渲染它。
```html
<flux:select variant="listbox" searchable>
<x-slot name="search">
<flux:select.search class="px-4" placeholder="Search industries..." />
</x-slot>
...
</flux:select>
```
### 多重選擇
允許用戶從選項列表中選擇多個選項。
```html
<flux:select variant="listbox" multiple placeholder="Choose industries...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 選定後綴
默認情況下，當選擇多個選項時，後綴" selected"將附加到所選選項的數量後面。您可以通過將selected-suffix屬性傳遞給選擇組件來自定義此語言。
```html
<flux:select variant="listbox" selected-suffix="industries selected" multiple>
...
</flux:select>
```
### 複選框指示器
如果您更喜歡複選框指示器而非默認的對勾圖標，可以使用indicator="checkbox"屬性。
```html
<flux:select variant="listbox" indicator="checkbox" multiple>
...
</flux:select>
```
### 清除搜索
默認情況下，可搜索選擇會在用戶選擇選項時清除搜索輸入。如果您希望禁用此行為，可以使用clear="close"屬性以僅在用戶關閉選擇時清除搜索輸入。
```html
<flux:select variant="listbox" searchable multiple clear="close">
...
</flux:select>
```
### 組合框
一個多功能組合框，可用於從基本自動完成到複雜多選的任何內容。
```html
<flux:select variant="combobox" placeholder="Choose industry...">
<flux:select.option>Photography</flux:select.option>
<flux:select.option>Design services</flux:select.option>
<flux:select.option>Web development</flux:select.option>
<flux:select.option>Accounting</flux:select.option>
<flux:select.option>Legal services</flux:select.option>
<flux:select.option>Consulting</flux:select.option>
<flux:select.option>Other</flux:select.option>
</flux:select>
```
### 輸入插槽
如果您需要完全控制用於觸發組合框的輸入元素，可以使用輸入插槽自行渲染它。
```html
<flux:select variant="combobox">
<x-slot name="input">
<flux:select.input x-model="search" :invalid="$errors->has('...')" />
</x-slot>
...
</flux:select>
```
### 動態選項
如果您希望在服務器上動態生成選項，可以使用:filter="false"屬性禁用客戶端過濾。
```html
<flux:select :filter="false">
@foreach ($options as $option)
<flux:select.option value="{{ $option->value }}">
{{ $option->label }}
</flux:select.option>
@endforeach
</flux:select>
```
### 參數參考
#### flux:select
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將選擇綁定到Livewire屬性 |
| name | 選擇的name屬性。使用wire:model時自動設置 |
| placeholder | 未選擇選項時顯示的文本 |
| label | 顯示在選擇上方的標籤文本 |
| description | 顯示在選擇下方的幫助文本 |
| description:trailing | 提供的描述將顯示在選擇下方而非上方 |
| badge | 提供標籤時顯示在flux:label組件末尾的徽章文本 |
| size | 選擇的大小。選項：sm、xs |
| variant | 選擇的視覺樣式。選項：default（原生選擇）、listbox、combobox |
| multiple | 允許選擇多個選項（僅限listbox和combobox變體） |
| filter | 如果為false，禁用客戶端過濾 |
| searchable | 添加搜索輸入以過濾選項（僅限listbox和combobox變體） |
| clearable | 選擇選項時顯示清除按鈕（僅限listbox和combobox變體） |
| selected-suffix | 在多選模式下附加到選定選項數量的文本（僅限listbox變體） |
| clear | 何時清除搜索輸入。選項：select（預設）、close（僅限listbox和combobox變體） |
| disabled | 防止用戶與選擇交互 |
| invalid | 對選擇應用錯誤樣式 |
| 插槽 | 說明 |
| --- | --- |
| default | 選擇選項 |
| trigger | 自定義觸發內容。通常是select.button或select.input組件（僅限listbox和combobox變體） |
| 屬性 | 說明 |
| --- | --- |
| data-flux-select | 應用於根元素以進行樣式設置和識別 |
#### flux:select.option
| 屬性 | 說明 |
| --- | --- |
| value | 與選項關聯的值 |
| disabled | 防止選擇該選項 |
| 插槽 | 說明 |
| --- | --- |
| default | 選項內容（在listbox變體中可以包括圖標、圖像等） |
#### flux:select.button
| 屬性 | 說明 |
| --- | --- |
| placeholder | 未選擇選項時顯示的文本 |
| invalid | 對按鈕應用錯誤樣式 |
| size | 按鈕的大小。選項：sm、xs |
| disabled | 防止選擇選項 |
| clearable | 選擇選項時顯示清除按鈕 |
#### flux:select.input
| 屬性 | 說明 |
| --- | --- |
| placeholder | 未選擇選項時顯示的文本 |
| invalid | 對輸入應用錯誤樣式 |
| size | 輸入的大小。選項：sm、xs |
## Separator 分隔線
視覺上分隔內容部分或項目組。
### 基本用法
```html
<flux:separator />
```
### 帶文本
向分隔線添加文本以獲得更具描述性的元素。
```html
<flux:separator text="or" />
```
### 垂直
水平堆疊時使用垂直分隔線分隔內容。
```html
<flux:separator vertical />
```
### 有限高度
您可以通過添加垂直邊距來限制垂直分隔線的高度。
```html
<flux:separator vertical class="my-2" />
```
### 微妙
Flux為融入背景的分隔線提供了subtle變體。
```html
<flux:separator vertical variant="subtle" />
```
### 參數參考
#### flux:separator
| 屬性 | 說明 |
| --- | --- |
| vertical | 顯示垂直分隔線。預設為水平 |
| variant | 視覺樣式變體。選項：subtle。預設：標準分隔線 |
| text | 在分隔線中心顯示的可選文本 |
| orientation | vertical屬性的替代方案。選項：horizontal、vertical。預設：horizontal |
| 類 | 說明 |
| --- | --- |
| my-* | 常用於縮短垂直分隔線 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-separator | 應用於根元素以進行樣式設置和識別 |
## Switch 開關
切換設置開關。適用於二元選項，如啟用或禁用功能。
在表單之外使用開關作為自動保存控件；在表單內使用複選框。
### 基本用法
```html
<flux:switch wire:model.live="notifications" label="Enable notifications" />
```
### 字段集
將相關開關分組在字段集內。
```html
<flux:fieldset>
<flux:legend>Email notifications</flux:legend>
<div class="space-y-4">
<flux:switch wire:model.live="communication" label="Communication emails" description="Receive emails about your account activity." />
<flux:separator variant="subtle" />
<flux:switch wire:model.live="marketing" label="Marketing emails" description="Receive emails about new products, features, and more." />
<flux:separator variant="subtle" />
<flux:switch wire:model.live="social" label="Social emails" description="Receive emails for friend requests, follows, and more." />
<flux:separator variant="subtle" />
<flux:switch wire:model.live="security" label="Security emails" description="Receive emails about your account activity and security." />
</div>
</flux:fieldset>
```
### 左對齊
使用align屬性左對齊開關以獲得更緊湊的佈局。
```html
<flux:fieldset>
<flux:legend>Email notifications</flux:legend>
<div class="space-y-3">
<flux:switch label="Communication emails" align="left" />
<flux:switch label="Marketing emails" align="left" />
<flux:switch label="Social emails" align="left" />
<flux:switch label="Security emails" align="left" />
</div>
</flux:fieldset>
```
### 參數參考
#### flux:switch
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將開關綁定到Livewire屬性 |
| name | 開關的name屬性。使用wire:model時自動設置 |
| label | 顯示在開關上方的標籤文本 |
| description | 顯示在開關下方的幫助文本 |
| align | 開關相對於其標籤的對齊方式。選項：right/start（預設）、left/end |
| disabled | 防止用戶與開關交互 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-switch | 應用於根元素以進行樣式設置和識別 |
| data-checked | 應用於開關處於"開啟"狀態時 |
## Table 表格
以濃縮、可搜索的格式顯示結構化數據。
### 基本用法
```html
<flux:table :paginate="$this->orders">
<flux:table.columns>
<flux:table.column>Customer</flux:table.column>
<flux:table.column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:table.column>
<flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:table.column>
<flux:table.column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:table.column>
</flux:table.columns>
<flux:table.rows>
@foreach ($this->orders as $order)
<flux:table.row :key="$order->id">
<flux:table.cell class="flex items-center gap-3">
<flux:avatar size="xs" src="{{ $order->customer_avatar }}" />
{{ $order->customer }}
</flux:table.cell>
<flux:table.cell class="whitespace-nowrap">{{ $order->date }}</flux:table.cell>
<flux:table.cell>
<flux:badge size="sm" :color="$order->status_color" inset="top bottom">{{ $order->status }}</flux:badge>
</flux:table.cell>
<flux:table.cell variant="strong">{{ $order->amount }}</flux:table.cell>
<flux:table.cell>
<flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
</flux:table.cell>
</flux:table.row>
@endforeach
</flux:table.rows>
</flux:table>
```
### 簡單
上面的主要表格示例是一個功能齊全的表格，帶有排序、分頁等。這裡有一個簡單數據表的乾淨示例，您可以用它作為更簡單的起點。
```html
<flux:table>
<flux:table.columns>
<flux:table.column>Customer</flux:table.column>
<flux:table.column>Date</flux:table.column>
<flux:table.column>Status</flux:table.column>
<flux:table.column>Amount</flux:table.column>
</flux:table.columns>
<flux:table.rows>
<flux:table.row>
<flux:table.cell>Lindsey Aminoff</flux:table.cell>
<flux:table.cell>Jul 29, 10:45 AM</flux:table.cell>
<flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>
<flux:table.cell variant="strong">$49.00</flux:table.cell>
</flux:table.row>
<flux:table.row>
<flux:table.cell>Hanna Lubin</flux:table.cell>
<flux:table.cell>Jul 28, 2:15 PM</flux:table.cell>
<flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>
<flux:table.cell variant="strong">$312.00</flux:table.cell>
</flux:table.row>
<flux:table.row>
<flux:table.cell>Kianna Bushevi</flux:table.cell>
<flux:table.cell>Jul 30, 4:05 PM</flux:table.cell>
<flux:table.cell><flux:badge color="zinc" size="sm" inset="top bottom">Refunded</flux:badge></flux:table.cell>
<flux:table.cell variant="strong">$132.00</flux:table.cell>
</flux:table.row>
<flux:table.row>
<flux:table.cell>Gustavo Geidt</flux:table.cell>
<flux:table.cell>Jul 27, 9:30 AM</flux:table.cell>
<flux:table.cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:table.cell>
<flux:table.cell variant="strong">$31.00</flux:table.cell>
</flux:table.row>
</flux:table.rows>
</flux:table>
```
### 分頁
通過將任何模型分頁器傳遞給paginate屬性，允許用戶瀏覽不同頁面的數據。
```html
<!-- $orders = \App\Models\Order::paginate(5) -->
<flux:table :paginate="$orders">
<!-- ... -->
</flux:table>
```
### 可排序
通過結合使用sortable、sorted和direction屬性，允許用戶按特定列排序行。
```html
<flux:table>
<flux:table.columns>
<flux:table.column>Customer</flux:table.column>
<flux:table.column sortable sorted direction="desc">Date</flux:table.column>
<flux:table.column sortable>Amount</flux:table.column>
</flux:table.columns>
<!-- ... -->
</flux:table>
```
### 參數參考
#### flux:table
| 屬性 | 說明 |
| --- | --- |
| paginate | 啟用分頁的Laravel分頁器實例 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-table | 應用於根元素以進行樣式設置和識別 |
#### flux:table.columns
| 插槽 | 說明 |
| --- | --- |
| default | 表格列 |
#### flux:table.column
| 屬性 | 說明 |
| --- | --- |
| align | 列內容的對齊方式。選項：start、center、end |
| sortable | 為列啟用排序功能 |
| sorted | 表示此列當前正在排序 |
| direction | 列排序時的排序方向。選項：asc、desc |
#### flux:table.rows
| 插槽 | 說明 |
| --- | --- |
| default | 表格行 |
#### flux:table.row
| 屬性 | 說明 |
| --- | --- |
| key | wire:key的別名：行的唯一標識符 |
| 插槽 | 說明 |
| --- | --- |
| default | 此行的表格單元格 |
#### flux:table.cell
| 屬性 | 說明 |
| --- | --- |
| align | 單元格內容的對齊方式。選項：start、center、end |
| variant | 單元格的視覺樣式。選項：default、strong |
我已閱讀您提供的文檔，以下是根據您的要求整理的繁體中文版 Flux UI 組件文檔：
## Tabs 標籤頁
組織內容為獨立的面板，在單一容器內。讓用戶能夠在不離開頁面的情況下輕鬆切換不同的內容區段。
```html
<flux:tab.group>
<flux:tabs wire:model="tab">
<flux:tab name="profile">個人資料</flux:tab>
<flux:tab name="account">帳戶</flux:tab>
<flux:tab name="billing">帳單</flux:tab>
</flux:tabs>
<flux:tab.panel name="profile">...</flux:tab.panel>
<flux:tab.panel name="account">...</flux:tab.panel>
<flux:tab.panel name="billing">...</flux:tab.panel>
</flux:tab.group>
```
### 帶圖標的標籤
使用圖標與標籤標題關聯，以視覺方式區分不同的區段。
```html
<flux:tab.group>
<flux:tabs>
<flux:tab name="profile" icon="user">個人資料</flux:tab>
<flux:tab name="account" icon="cog-6-tooth">帳戶</flux:tab>
<flux:tab name="billing" icon="banknotes">帳單</flux:tab>
</flux:tabs>
<flux:tab.panel name="profile">...</flux:tab.panel>
<flux:tab.panel name="account">...</flux:tab.panel>
<flux:tab.panel name="billing">...</flux:tab.panel>
</flux:tab.group>
```
### 邊緣填充
默認情況下，標籤在邊緣沒有水平填充。如果需要添加填充，可以使用 Tailwind 工具類應用於 tabs 和/或 tab.panel 組件。
```html
<flux:tabs class="px-4">
<flux:tab name="profile">個人資料</flux:tab>
<flux:tab name="account">帳戶</flux:tab>
<flux:tab name="billing">帳單</flux:tab>
</flux:tabs>
```
### 分段式標籤
使用視覺上分離的按鈕式標籤來瀏覽內容。適合在有限寬度的容器內切換視圖。
```html
<flux:tabs variant="segmented">
<flux:tab>列表</flux:tab>
<flux:tab>看板</flux:tab>
<flux:tab>時間線</flux:tab>
</flux:tabs>
```
### 帶圖標的分段式標籤
將分段式標籤與前綴圖標結合使用。
```html
<flux:tabs variant="segmented">
<flux:tab icon="list-bullet">列表</flux:tab>
<flux:tab icon="squares-2x2">看板</flux:tab>
<flux:tab icon="calendar-days">時間線</flux:tab>
</flux:tabs>
```
### 小型分段式標籤
對於更緊湊的佈局，可以使用 `size="sm"` 屬性使標籤變小。
```html
<flux:tabs variant="segmented" size="sm">
<flux:tab>演示</flux:tab>
<flux:tab>代碼</flux:tab>
</flux:tabs>
```
### 藥丸式標籤
使用視覺上分離的藥丸式標籤來瀏覽內容。
```html
<flux:tabs variant="pills">
<flux:tab>列表</flux:tab>
<flux:tab>看板</flux:tab>
<flux:tab>時間線</flux:tab>
</flux:tabs>
```
### 動態標籤
如果需要，可以在 Livewire 組件中動態生成額外的標籤和面板。確保為新標籤和面板使用匹配的名稱。
```html
<flux:tab.group>
<flux:tabs>
@foreach($tabs as $id => $tab)
<flux:tab :name="$id">{{ $tab }}</flux:tab>
@endforeach
<flux:tab icon="plus" wire:click="addTab" action>新增標籤</flux:tab>
</flux:tabs>
@foreach($tabs as $id => $tab)
<flux:tab.panel :name="$id">
<!-- ... -->
</flux:tab.panel>
@endforeach
</flux:tab.group>
```
```php
// Livewire 組件示例代碼...
public array $tabs = [
'tab-1' => '標籤 #1',
'tab-2' => '標籤 #2',
];
public function addTab(): void
{
$id = 'tab-' . str()->random();
$this->tabs[$id] = '標籤 #' . (count($this->tabs) + 1);
}
```
### 參數參考
#### flux:tab.group
標籤和相關面板的容器。
| 插槽 | 說明 |
| --- | --- |
| default | 標籤和面板組件。 |
#### flux:tabs
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將活動標籤綁定到 Livewire 屬性。參見 [wire:model 文檔](https://livewire.laravel.com/docs/wire-model) |
| variant | 標籤的視覺風格。選項：default、segmented、pills。 |
| size | 標籤的大小。選項：base (默認)、sm。 |
| 插槽 | 說明 |
| --- | --- |
| default | 單個標籤組件。 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-tabs | 應用於根元素，用於樣式設定和識別。 |
#### flux:tab
| 屬性 | 說明 |
| --- | --- |
| name | 標籤的唯一標識符，用於與其面板匹配。 |
| icon | 顯示在標籤開頭的圖標名稱。 |
| icon:trailing | 顯示在標籤結尾的圖標名稱。 |
| icon:variant | 圖標的變體。選項：outline、solid、mini、micro。 |
| action | 將標籤轉換為動作按鈕（用於"新增標籤"功能）。 |
| accent | 如果為 true，則將強調色樣式應用於標籤。 |
| size | 標籤的大小（僅適用於 variant="segmented"）。選項：base (默認)、sm。 |
| disabled | 禁用標籤。 |
| 插槽 | 說明 |
| --- | --- |
| default | 標籤標籤內容。 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-tab | 應用於標籤元素，用於樣式設定和識別。 |
| data-selected | 當標籤被選中/激活時應用。 |
#### flux:tab.panel
| 屬性 | 說明 |
| --- | --- |
| name | 與相關標籤匹配的唯一標識符。 |
| 插槽 | 說明 |
| --- | --- |
| default | 當相關標籤被選中時顯示的面板內容。 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-tab-panel | 應用於面板元素，用於樣式設定和識別。 |
## Text 文本
一致的排版組件，如文本和連結。
```html
<flux:heading>文本組件</flux:heading>
<flux:text class="mt-2">這是用於正文和應用程序中一般內容的標準文本組件。</flux:text>
```
### 尺寸
使用標準 Tailwind 控制文本的尺寸，以便更容易適應不同的屏幕尺寸。
```html
<flux:text class="text-base">基本文本尺寸</flux:text>
<flux:text>默認文本尺寸</flux:text>
<flux:text class="text-xs">較小文本</flux:text>
```
### 顏色
使用標準 Tailwind 控制文本的顏色，以便更容易適應不同的屏幕尺寸。
```html
<flux:text variant="strong">強調文本顏色</flux:text>
<flux:text>默認文本顏色</flux:text>
<flux:text variant="subtle">柔和文本顏色</flux:text>
<flux:text color="blue">彩色文本</flux:text>
```
### 連結
使用連結組件創建可點擊的文本，用於導航到其他頁面或資源。
```html
<flux:text>訪問我們的 <flux:link href="#">文檔</flux:link> 獲取更多信息。</flux:text>
```
### 連結變體
連結可以根據上下文和重要性進行不同的樣式設計。
```html
<flux:link href="#">默認連結</flux:link>
<flux:link href="#" variant="ghost">幽靈連結</flux:link>
<flux:link href="#" variant="subtle">柔和連結</flux:link>
```
### 參數參考
#### flux:text
| 屬性 | 說明 |
| --- | --- |
| size | 文本的大小。選項：xs、sm、base、lg。默認：base。 |
| variant | 文本變體。選項：strong、subtle。默認：default。 |
| color | 文本的顏色。選項：default、red、orange、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose。默認：default。 |
| inline | 如果為 true，文本元素將是 span 而不是 p。 |
#### flux:link
| 屬性 | 說明 |
| --- | --- |
| href | 連結指向的 URL。必填項。 |
| variant | 連結樣式變體。選項：default、ghost、subtle。默認：default。 |
| external | 如果為 true，連結將在新標籤中打開。 |
## Textarea 文本區域
從用戶那裡捕獲多行文本輸入。適用於評論、描述和反饋。
### 帶佔位符
在文本區域內顯示提示，指導用戶輸入內容。
```html
<flux:textarea
label="訂單備註"
placeholder="不要生菜、番茄或洋蔥..."/>
```
### 固定行高
通過傳遞 rows 屬性來自定義文本區域的高度。
```html
<flux:textarea rows="2" label="備註" />
```
### 自動調整大小的文本區域
使用 CSS 的新 field-sizing 屬性，文本區域會通過傳遞 rows="auto" 屬性自動調整其高度以適應內容。
這個功能並非所有網絡瀏覽器都支持。訪問 [caniuse.com](https://caniuse.com/?search=field-sizing) 查看哪些瀏覽器支持這個功能。
```html
<flux:textarea rows="auto" />
```
### 配置調整大小
如果要限制用戶調整文本區域的大小，可以使用 resize="none" 屬性。
```html
<flux:textarea resize="vertical" />
<flux:textarea resize="none" />
<flux:textarea resize="horizontal" />
<flux:textarea resize="both" />
```
### 參數參考
#### flux:textarea
| 屬性 | 說明 |
| --- | --- |
| wire:model | 將文本區域綁定到 Livewire 屬性。參見 [wire:model 文檔](https://livewire.laravel.com/docs/wire-model) 獲取更多信息。 |
| name | 文本區域的 name 屬性。使用 wire:model 時自動設置。 |
| placeholder | 文本區域為空時顯示的佔位符文本。 |
| label | 顯示在文本區域上方的標籤文本。當提供時，將文本區域包裝在帶有相鄰 flux:label 組件的 flux:field 組件中。參見 [field 組件](https://fluxui.dev/components/field)。 |
| description | 顯示在文本區域下方的幫助文本。當與標籤一起提供時，出現在 flux:field 包裝器內的標籤和文本區域之間。參見 [field 組件](https://fluxui.dev/components/field)。 |
| description:trailing | 提供的描述將顯示在文本區域下方而不是上方。 |
| badge | 當提供 label 屬性時，顯示在 flux:label 組件末尾的徽章文本。 |
| rows | 可見文本行數。使用 "auto" 進行自動高度調整。默認：4。 |
| resize | 控制文本區域如何調整大小。選項：vertical（默認）、horizontal、both、none。 |
| invalid | 如果為 true，則對文本區域應用錯誤樣式。 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-textarea | 應用於文本區域元素，用於樣式設定和識別。 |
## Toast 提示訊息
提供關於操作或事件的反饋訊息，通常是臨時的且可關閉的。
要從 Livewire 使用 Toast 組件，必須在頁面的某個位置包含它；通常在佈局文件中：
```html
<body>
<!-- ... -->
<flux:toast />
</body>
```
如果使用 wire:navigate 在頁面之間導航，可能希望保持 toast 組件，使 toast 訊息在導航離開頁面時不會突然消失。
```html
<body>
<!-- ... -->
@persist('toast')
<flux:toast />
@endpersist
</body>
```
一旦 toast 組件出現在頁面上，就可以使用 `Flux::toast()` 方法從 Livewire 組件觸發 toast 訊息：
```php
<?php
namespace App\Livewire;
use Livewire\Component;
use Flux;
class EditPost extends Component
{
public function save()
{
// ...
Flux::toast('您的變更已儲存。');
}
}
```
您也可以直接使用 Flux 的魔術方法從 Alpine 觸發 toast：
```html
<button x-on:click="$flux.toast('您的變更已儲存。')">
儲存變更
</button>
```
或者，您可以使用 window.Flux 全局對象從應用程序中的任何 JavaScript 觸發 toast：
```html
<script>
let button = document.querySelector('...')
button.addEventListener('alpine:init', () => {
Flux.toast('您的變更已儲存。')
})
</script>
```
$flux 和 window.Flux 支持以下方法參數簽名：
```js
Flux.toast('您的變更已儲存。')
// 或...
Flux.toast({
heading: '變更已儲存',
text: '您的變更已儲存。',
variant: 'success',
})
```
### 帶標題
使用標題為 toast 提供額外的上下文。
```php
Flux::toast(
heading: '變更已儲存。',
text: '您可以隨時在設置中更新此內容。',
);
```
### 變體
使用 variant 屬性改變 toast 的視覺樣式。
```php
Flux::toast(variant: 'success', ...);
Flux::toast(variant: 'warning', ...);
Flux::toast(variant: 'danger', ...);
```
### 位置
默認情況下，toast 將出現在頁面的右下角。您可以使用 position 屬性自定義此位置。
```html
<flux:toast position="top right" />
<!-- 為導航欄等定制頂部填充... -->
<flux:toast position="top right" class="pt-24" />
```
### 持續時間
默認情況下，toast 將在 5 秒後自動關閉。您可以通過向 duration 屬性傳遞毫秒數來自定義此持續時間。
```php
// 1 秒...
Flux::toast(duration: 1000, ...);
```
### 永久顯示
使用 0 作為 duration 屬性的值，使 toast 無限期保持開啟。
```php
// 無限期顯示...
Flux::toast(duration: 0, ...);
```
### 參數參考
#### flux:toast
| 屬性 | 說明 |
| --- | --- |
| position | toast 在屏幕上的位置。選項：bottom right（默認）、bottom left、top right、top left。 |
| duration | toast 自動關閉前的毫秒數。使用 0 表示永久 toast。默認：5000。 |
| variant | toast 的視覺樣式。選項：success、warning、danger。 |
#### Flux::toast()
從 Livewire 組件觸發 toast 的 PHP 方法。
| 參數 | 說明 |
| --- | --- |
| heading | toast 的可選標題文本。 |
| text | toast 的主要內容文本。 |
| variant | 視覺樣式。選項：success、warning、danger。 |
| duration | 毫秒數。使用 0 表示永久 toast。默認：5000。 |
#### $flux.toast()
從 Alpine 組件觸發 toast 的 Alpine.js 魔術方法。可以通過兩種方式使用：
```js
// 僅使用消息的簡單用法...
$flux.toast('您的變更已儲存')
// 使用完整配置的高級用法...
$flux.toast({
heading: '成功！',
text: '您的變更已儲存',
variant: 'success',
duration: 3000
})
```
| 參數 | 說明 |
| --- | --- |
| message | 包含 toast 消息的字符串。使用此簡單形式時，消息成為 toast 的文本內容。 |
| options | 或者，包含：- heading：可選標題文本 - text：主要消息文本 - variant：視覺樣式（success、warning、danger）- duration：顯示時間（毫秒） |
## Tooltip 提示框
當用戶懸停或聚焦於某個元素時提供額外信息。
由於工具提示依賴於懸停狀態，觸摸設備（如移動電話）通常不會顯示它們。因此，建議通過 UI 傳達基本信息，而不是依賴移動用戶的工具提示。
```html
<flux:tooltip content="設置">
<flux:button icon="cog-6-tooth" icon:variant="outline" />
</flux:tooltip>
```
作為簡寫，可以直接將 tooltip 屬性傳遞給按鈕組件。
```html
<flux:button tooltip="設置" ... />
```
在工具提示內容必不可少的情況下，應該使其可切換。這樣，觸摸設備上的用戶將能夠通過點擊/按壓而不是懸停來觸發它。
```html
<flux:heading class="flex items-center gap-2">
稅務識別號
<flux:tooltip toggleable>
<flux:button icon="information-circle" size="sm" variant="ghost" />
<flux:tooltip.content class="max-w-[20rem] space-y-2">
<p>對於美國企業，輸入不帶連字符的 9 位數僱主識別號 (EIN)。</p>
<p>對於歐洲公司，輸入包括國家前綴的增值稅號碼（例如，DE123456789）。</p>
</flux:tooltip.content>
</flux:tooltip>
</flux:heading>
```
### 位置
在元素周圍定位工具提示以獲得最佳可見性。選擇 top、right、bottom 或 left。
```html
<flux:tooltip content="設置" position="top">
<flux:button icon="cog-6-tooth" icon:variant="outline" />
</flux:tooltip>
<flux:tooltip content="設置" position="right">
<flux:button icon="cog-6-tooth" icon:variant="outline" />
</flux:tooltip>
<flux:tooltip content="設置" position="bottom">
<flux:button icon="cog-6-tooth" icon:variant="outline" />
</flux:tooltip>
<flux:tooltip content="設置" position="left">
<flux:button icon="cog-6-tooth" icon:variant="outline" />
</flux:tooltip>
```
### 禁用按鈕
默認情況下，禁用按鈕上的工具提示不會被觸發，因為指針事件也被禁用。但是，作為解決方法，可以針對包裝元素而不是直接針對按鈕。
```html
<flux:tooltip content="必須由團隊成員審核後才能合併">
<div>
<flux:button disabled icon="arrow-turn-down-right">合併拉取請求</flux:button>
</div>
</flux:tooltip>
```
### 參數參考
#### flux:tooltip
| 屬性 | 說明 |
| --- | --- |
| content | 在工具提示中顯示的文本內容。替代使用 flux:tooltip.content 組件。 |
| position | 工具提示相對於觸發元素的位置。選項：top（默認）、right、bottom、left。 |
| align | 工具提示的對齊方式。選項：center（默認）、start、end。 |
| gap | 觸發元素和工具提示之間的間距。默認：5px。 |
| offset | 工具提示相對於觸發元素的偏移量。默認：0px。 |
| toggleable | 使工具提示可點擊而不僅是懸停。對觸摸設備有用。 |
| interactive | 使用適當的 ARIA 屬性（aria-expanded 和 aria-controls）來表示工具提示具有交互式內容。 |
| kbd | 在工具提示末尾顯示的鍵盤快捷方式提示。 |
| 屬性 | 說明 |
| --- | --- |
| data-flux-tooltip | 應用於根元素，用於樣式設定和識別。 |
#### flux:tooltip.content
| 屬性 | 說明 |
| --- | --- |
| kbd | 在工具提示內容末尾顯示的鍵盤快捷方式提示。 |
Sign in with Wallet
Connect another wallet