看板

版本 ^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 参考，请查看看板组件文档。