版本 ^2.9.0

项目管理、任务跟踪、流程可视化——看板无处不在。
从零设计一个看板会很繁琐，所以我们认为 Flux 应该让这件事变得简单。

来看看我们全新的看板系统，它是一组用于构建漂亮工作流看板的组件集合。
看一眼你就会明白。

<flux:kanban>
    @foreach ($columns as $column)
        <flux:kanban.column>
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />
            <flux:kanban.column.cards>
                @foreach ($column->cards as $card)
                    <flux:kanban.card :heading="$card->title" />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>

列布局

列支持标题、计数和操作插槽。
你可以为列管理添加下拉菜单，或添加快速新建按钮：

<flux:kanban.column.header heading="In Progress" count="5">
    <x-slot name="actions">
        <flux:dropdown>
            <flux:button variant="subtle" icon="ellipsis-horizontal" size="sm" />
            <flux:menu>
                <flux:menu.item icon="plus">New card</flux:menu.item>
                <!-- ... -->
            </flux:menu>
        </flux:dropdown>
        <flux:button variant="subtle" icon="plus" size="sm" />
    </x-slot>
</flux:kanban.column.header>

灵活的卡片

卡片通过头部和底部插槽组合，可以获得最大的灵活性。

卡片头部

在 header 插槽中可以放徽章、标签或标记：

<flux:kanban.card heading="Update privacy policy">
    <x-slot name="header">
        <div class="flex gap-2">
            <flux:badge color="blue" size="sm">UI</flux:badge>
            <flux:badge color="green" size="sm">Backend</flux:badge>
            <flux:badge color="red" size="sm">Bug</flux:badge>
        </div>
    </x-slot>
</flux:kanban.card>

卡片底部

在 footer 插槽中可以放头像、图标或元信息：

<flux:kanban.card heading="Update privacy policy">
    <x-slot name="footer">
        <flux:icon name="bars-3-bottom-left" variant="micro" class="text-zinc-400" />
        <flux:avatar.group>
            <flux:avatar circle size="xs" src="..." />
            <!-- ... -->
        </flux:avatar.group>
    </x-slot>
</flux:kanban.card>

卡片也可以通过 as="button" 变成可点击，用于打开弹窗或详情视图：

<flux:kanban.card as="button" wire:click="edit({{ $card->id }})" heading="{{ $card->title }}">
    <!-- ... -->
</flux:kanban.card>

拖拽排序

Flux 本身不内置拖拽功能，但你可以使用 Alpine 的 x-sort 插件，或者（更推荐）使用 Livewire 4（当前为 beta）的 wire:sort 来实现：

<flux:kanban wire:sort="moveColumn">
    @foreach ($columns as $column)
        <flux:kanban.column
            :wire:key="$column->id"
            :wire:sort:item="$column->id"
        >
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />
            <flux:kanban.column.cards wire:sort="moveCards">
                @foreach ($column->cards as $card)
                    <flux:kanban.card
                        :heading="$card->title"
                        :wire:key="$card->id"
                        :wire:sort:item="$card->id"
                    />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>

更多示例和完整 API 参考，请查看看板组件文档。

版本 ^2.9.0

加载状态很重要。精心设计的骨架屏可以在内容加载时保持用户的专注，让你的应用感觉更快、更精致。

下面介绍骨架屏，这是一个用于创建占位内容的灵活组件。

<flux:skeleton.group animate="shimmer" class="flex items-center gap-4">
    <flux:skeleton class="size-10 rounded-full" />
    <div class="flex-1">
        <flux:skeleton.line />
        <flux:skeleton.line class="w-1/2" />
    </div>
</flux:skeleton.group>

文本占位符

skeleton.line 组件会模拟真实文本——它占据完整的行高，但只渲染一条更细的条形，从而获得更接近真实文本的自然比例：

<flux:skeleton.group>
    <flux:skeleton.line class="mb-2 w-1/4" />
    <flux:skeleton.line />
    <flux:skeleton.line />
    <flux:skeleton.line class="w-3/4" />
</flux:skeleton.group>

动画选项

你可以在闪动（shimmer）和呼吸（pulse）动画之间选择，或者完全不使用动画。skeleton.group 组件允许你只设置一次动画，然后所有子骨架组件都会继承这个设置：

<!-- 闪动动画 -->
<flux:skeleton.group animate="shimmer">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 呼吸动画 -->
<flux:skeleton.group animate="pulse">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 无动画 -->
<flux:skeleton.line />

真实场景示例

你可以为任何东西构建骨架状态——表格、卡片、图表、个人资料等。下面是一个表格加载状态示例：

<flux:skeleton.group animate="shimmer">
    <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.columns>
        <flux:table.rows>
            @foreach (range(1, 5) as $i)
                <flux:table.row>
                    <flux:table.cell>
                        <div class="flex items-center gap-2">
                            <flux:skeleton class="rounded-full size-5" />
                            <flux:skeleton.line />
                        </div>
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                    <flux:table.cell>
                        <flux:skeleton.line />
                    </flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>
</flux:skeleton.group>

查看 骨架屏 文档，了解更多示例和完整的 API 参考。

版本：^2.8.0

无论是搭建价格筛选、调节设置，还是选择一个数值区间，滑块几乎适用于各种界面。现在，Flux 自带了一个功能完备的 Slider 组件。
下面一起来看看。

<flux:slider wire:model="employees" />

范围选择

需要选择一个区间而不是单个值？添加 range 属性即可获得两个滑块——非常适合价格区间、日期区间或任意最小值/最大值过滤场景。

<flux:slider range wire:model="budget" />

在你的 Livewire 组件中绑定到一个数组，这两个数值会实时更新：

public array $range = [200, 800];

精细控制

通过 min、max、step 和 min-steps-between 精确配置滑块行为：

<flux:slider
    range
    min="0"
    max="1000"
    step="10"
    min-steps-between="10"
/>

min-steps-between 属性会确保范围滑块的两个滑块之间始终保持最小间距——比如当 step 为 10 且 min-steps-between 为 10 时，两个滑块之间的距离始终至少为 100 个单位。

视觉刻度

在滑块下方添加刻度，帮助用户理解步长和数值。你可以展示简单的刻度线、数字，或自定义标签：

<!-- 简单刻度线 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i" />
    @endforeach
</flux:slider>

<!-- 带数字 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i">{{ $i }}</flux:slider.tick>
    @endforeach
</flux:slider>

<!-- 自定义标签 -->
<flux:slider min="1" max="5">
    <flux:slider.tick value="1">Low</flux:slider.tick>
    <flux:slider.tick value="3">Mid</flux:slider.tick>
    <flux:slider.tick value="5">High</flux:slider.tick>
</flux:slider>

自定义样式

使用 track:class 和 thumb:class 自由定制样式。想要更厚实一点的滑块？没问题：

<flux:slider track:class="h-3 bg-blue-600" thumb:class="size-5" />

这些属性在保持完整功能的同时，给你充分的外观控制能力。

那些重要的细节

我们在这个组件上非常用心，希望你能感受到这些打磨。

• 偏移鼠标跟踪：当你点击并拖动滑块时，不会把滑块中心强行对齐到鼠标位置——这让你在微调（比如只移动一两个步长）时感觉更加自然、精确。

• 智能滑块行为：在范围模式下，两个滑块不会交叉并导致区间反转。右侧滑块在它们靠得很近时会始终保持在上方，避免搞混哪个是哪个。

• 大步长：按住 Shift 再用方向键，可以通过 big-step 属性按更大的增量跳动——非常适合在大范围内快速移动。

可访问性

当然，我们也投入了大量精力，确保这个组件在键盘导航、焦点指示以及合适的 ARIA 标签方面都符合预期，让依赖屏幕阅读器的用户也能顺畅使用。方向键可以调节数值，在范围滑块中你可以通过 Tab 在不同滑块之间切换焦点。

查看 Slider 文档以获取更多示例和完整的 API 参考。