Flux UI
Toggle sidebar

顯示 Display

顯示元件，用於呈現資訊和狀態。

Avatar 頭像

使用者頭像元件，支援圖片、姓名縮寫和群組顯示。

基本頭像 Basic
JD
JS
王小 
<flux:avatar name="John Doe" />
<flux:avatar name="Jane Smith" />
<flux:avatar name="王小明" />
尺寸變化 Sizes
JD
JD
JD
JD
JD 
<flux:avatar name="John Doe" size="xs" />
<flux:avatar name="John Doe" size="sm" />
<flux:avatar name="John Doe" />
<flux:avatar name="John Doe" size="lg" />
<flux:avatar name="John Doe" size="xl" />
圖片頭像 With Image 
<flux:avatar src="https://example.com/avatar.jpg" />
頭像群組 Group
Al
Bo
Ch
A
B
C
+5 
<flux:avatar.group>
    <flux:avatar name="Alice" />
    <flux:avatar name="Bob" />
    <flux:avatar name="Charlie" />
</flux:avatar.group>

<flux:avatar.group>
    <flux:avatar name="A" />
    <flux:avatar name="B" />
    <flux:avatar name="C" />
    <flux:avatar>+5</flux:avatar>
</flux:avatar.group>

Badge 徽章

徽章標籤元件，用於狀態標示和分類標記。

基本徽章 Basic
預設
標籤
Badge 
<flux:badge>預設</flux:badge>
<flux:badge>標籤</flux:badge>
顏色變化 Colors
預設
錯誤
警告
注意
成功
已完成
資訊
主要
Pro
VIP
新品 
<flux:badge color="red">錯誤</flux:badge>
<flux:badge color="green">成功</flux:badge>
<flux:badge color="blue">資訊</flux:badge>
<flux:badge color="yellow">警告</flux:badge>
尺寸變化 Sizes
小型
中型（預設）
大型 
<flux:badge size="sm">小型</flux:badge>
<flux:badge>中型</flux:badge>
<flux:badge size="lg">大型</flux:badge>
含圖示 With Icon
已完成
失敗
警告
資訊 
<flux:badge color="green" icon="check-circle">已完成</flux:badge>
<flux:badge color="red" icon="x-circle">失敗</flux:badge>

Icon 圖示

圖示元件，使用 Heroicons 圖示庫。

基本圖示 Basic 
<flux:icon name="home" class="size-6" />
<flux:icon name="user" class="size-6" />
<flux:icon name="cog" class="size-6" />
樣式變化 Variants

outline

solid

mini

micro

<flux:icon name="star" variant="outline" class="size-6" />
<flux:icon name="star" variant="solid" class="size-6" />
<flux:icon name="star" variant="mini" class="size-6" />
<flux:icon name="star" variant="micro" class="size-6" />
顏色變化 Colors 
<flux:icon name="heart" class="size-8 text-red-500" variant="solid" />
<flux:icon name="star" class="size-8 text-yellow-500" variant="solid" />
<flux:icon name="check-circle" class="size-8 text-green-500" variant="solid" />
尺寸變化 Sizes 
<flux:icon name="home" class="size-4" />
<flux:icon name="home" class="size-6" />
<flux:icon name="home" class="size-8" />
<flux:icon name="home" class="size-10" />
<flux:icon name="home" class="size-12" />

Skeleton 載入骨架

載入骨架元件，用於內容載入時的佔位顯示。

基本骨架 Basic 
<flux:skeleton class="h-4 w-3/4" />
<flux:skeleton class="h-4 w-1/2" />
<flux:skeleton class="h-4 w-2/3" />
動畫效果 Animations

Shimmer

Pulse

<flux:skeleton.group animate="shimmer">
    <flux:skeleton class="h-4 w-3/4" />
    <flux:skeleton class="h-4 w-1/2" />
</flux:skeleton.group>

<flux:skeleton.group animate="pulse">
    <flux:skeleton class="h-4 w-3/4" />
    <flux:skeleton class="h-4 w-1/2" />
</flux:skeleton.group>
形狀變化 Shapes 
<!-- 圓形 -->
<flux:skeleton class="h-10 w-10 rounded-full" />

<!-- 方形 -->
<flux:skeleton class="h-24 w-24 rounded-lg" />

<!-- 長方形 -->
<flux:skeleton class="h-32 w-48 rounded-xl" />
卡片骨架 Card Example 
<flux:skeleton.group animate="shimmer">
    <div class="flex items-center gap-3">
        <flux:skeleton class="h-12 w-12 rounded-full" />
        <div class="space-y-2 flex-1">
            <flux:skeleton.line class="w-1/3" />
            <flux:skeleton.line class="w-1/2" />
        </div>
    </div>
    <div class="mt-6 space-y-3">
        <flux:skeleton.line />
        <flux:skeleton.line class="w-5/6" />
        <flux:skeleton.line class="w-4/6" />
    </div>
</flux:skeleton.group>

Callout 提示區塊

提示區塊元件，用於重要資訊提示和警告訊息。

基本提示 Basic
這是一個基本的提示訊息區塊。 
<flux:callout icon="information-circle">
    這是一個基本的提示訊息區塊。
</flux:callout>
樣式變化 Variants
一般提示訊息，用於顯示說明或補充資訊。
操作成功！您的變更已儲存。
請注意：此操作無法復原，請謹慎執行。
發生錯誤：無法連線到伺服器，請稍後再試。 
<flux:callout icon="information-circle">
    一般提示訊息
</flux:callout>

<flux:callout variant="success" icon="check-circle">
    操作成功！
</flux:callout>

<flux:callout variant="warning" icon="exclamation-triangle">
    請注意此操作
</flux:callout>

<flux:callout variant="danger" icon="x-circle">
    發生錯誤
</flux:callout>
含標題 With Heading
部署成功
您的應用程式已成功部署到生產環境。所有服務正常運行中。
資料庫遷移提醒
在執行此操作前，請先備份您的資料庫。此變更將影響所有現有記錄。 
<flux:callout variant="success" icon="check-circle">
    <flux:callout.heading>部署成功</flux:callout.heading>
    <flux:callout.text>
        您的應用程式已成功部署。
    </flux:callout.text>
</flux:callout>

Accent 強調色

設定區域的強調色主題，影響內部元件的配色。

基本強調色 Basic 
<flux:accent color="red">
    <flux:button variant="primary">紅色主題</flux:button>
</flux:accent>

<flux:accent color="blue">
    <flux:button variant="primary">藍色主題</flux:button>
</flux:accent>
作用範圍 Scope
徽章
Indigo 徽章

Accent 會影響範圍內所有使用強調色的元件。

<flux:accent color="indigo">
    <div class="space-y-3">
        <flux:button variant="primary">主要按鈕</flux:button>
        <flux:badge>徽章</flux:badge>
        <flux:text>強調色會影響範圍內的所有元件</flux:text>
    </div>
</flux:accent>

API Reference

完整的元件屬性參考。

flux:avatar
屬性
值
說明
name string 使用者名稱,用於生成縮寫
src string 頭像圖片 URL
size xs | sm | md | lg | xl 頭像尺寸（預設 md）
flux:badge
屬性
值
說明
color zinc | red | orange | yellow | lime | green | cyan | blue | indigo | purple | pink 徽章顏色
size sm | md | lg 徽章尺寸（預設 md）
icon string 圖示名稱
flux:icon
屬性
值
說明
name string Heroicons 圖示名稱
variant outline | solid | mini | micro 圖示樣式（預設 outline）
flux:skeleton & flux:skeleton.group
屬性
值
說明
animate shimmer | pulse 動畫效果（僅 skeleton.group）
flux:callout
屬性
值
說明
variant default | success | warning | danger 提示區塊樣式
icon string 圖示名稱
flux:accent
屬性
值
說明
color red | orange | yellow | lime | green | cyan | blue | indigo | purple | pink 強調色顏色