显示侧边栏
隐藏侧边栏
计划中
6
更新应用内隐私政策
搜索栏联想结果异常
优化加载动画视觉效果
日期选择器键盘输入失效
管理后台权限异常
图库中的图片链接失效
进行中
5
移动端响应式优化
数据表排序异常
API 错误码不一致
无障碍审查进行中
用户仪表盘重设计
审核中
3
按钮双击问题
大文件上传导致崩溃
API 并发请求处理问题
<flux:kanban> @foreach ($this->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>列操作
在列标题中添加操作。
计划中
4
<flux:kanban.column> <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)"> <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.item icon="archive-box">Archive column</flux:menu.item> <flux:menu.separator /> <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item> </flux:menu> </flux:dropdown> <flux:button variant="subtle" icon="plus" size="sm" /> </x-slot> </flux:kanban.column.header> <flux:kanban.column.cards> <!-- ... --> </flux:kanban.column.cards></flux:kanban.column>列副标题
使用 subheading 属性为列标题添加副标题。
待办
想法和建议
<flux:kanban.column> <flux:kanban.column.header heading="Blacklog" subheading="Ideas and suggestions" /> <flux:kanban.column.cards> <!-- ... --> </flux:kanban.column.cards></flux:kanban.column>列页脚
使用 flux:kanban.column.footer 组件为列添加页脚，用于展示额外信息或诸如「新建卡片」之类的操作。
计划中
<flux:kanban.column> <flux:kanban.column.header :heading="$column['title']" count="5" /> <flux:kanban.column.cards> <!-- ... --> </flux:kanban.column.cards> <flux:kanban.column.footer> <form> <flux:kanban.card> <div class="flex items-center gap-1"> <flux:heading class="flex-1"> <input class="w-full outline-none" placeholder="New card..."> </flux:heading> <flux:button type="submit" variant="filled" size="sm" inset="top bottom" class="-me-1.5">Add</flux:button> </div> </flux:kanban.card> </form> <flux:button variant="subtle" icon="plus" size="sm" align="start"> New card </flux:button> </flux:kanban.column.footer></flux:kanban.column>卡片作为按钮
通过向 flux:kanban.card 组件传入 as="button" 属性，让卡片变为可点击。
这样你就可以使用 wire:click 或 x-on:click 指令来处理点击事件。
计划中
更新应用内隐私政策
<flux:kanban.card as="button" wire:click="edit" heading="Update privacy policy in app" />卡片头部
使用 <x-slot name="header"> 插槽为卡片添加头部，用于展示额外信息或操作。
计划中
更新应用内隐私政策
<flux:kanban.card as="button" heading="Update privacy policy in app"> <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>卡片页脚
使用 <x-slot name="footer"> 插槽为卡片添加页脚，用于展示额外信息或操作。
计划中
更新应用内隐私政策
3+
<flux:kanban.card as="button" heading="Update privacy policy in app"> <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="https://unavatar.io/x/calebporzio" /> <flux:avatar circle size="xs" src="https://unavatar.io/github/hugosaintemarie" /> <flux:avatar circle size="xs" src="https://unavatar.io/github/joshhanley" /> <flux:avatar circle size="xs">3+</flux:avatar> </flux:avatar.group> </x-slot></flux:kanban.card>参考
flux:kanban.column
|
Slot
|
Description
|
|---|---|
| default |
应包含一个 flux:kanban.column.header、一个 flux:kanban.column.cards，以及可选的 flux:kanban.column.footer 组件。
|
flux:kanban.column.header
|
属性
|
描述
|
|---|---|
| heading |
列头部中显示的标题文本。
|
| subheading |
可选的副标题文本，显示在列头部的下方。
|
| count |
可选的数字，显示在标题旁边，通常用于表示该列中的卡片数量。
|
| badge |
可选的徽标文本或内容，显示在标题旁边。支持使用 badge:* 属性进行自定义。
|
|
槽位
|
描述
|
|---|---|
| default |
用于在头部显示的自定义内容。如果提供，将覆盖 heading 和 count 属性。
|
| actions |
可选槽位，用于在列头部右侧显示操作按钮或下拉菜单。
|
flux:kanban.card
|
属性
|
描述
|
|---|---|
| heading |
卡片中显示的标题文本。
|
| as |
用于渲染卡片的元素类型。可选值：button、div（默认）。当设置为 button 时，卡片将变为可点击。
|
|
槽位
|
描述
|
|---|---|
| default |
用于在卡片主体中显示的自定义内容。如果提供，将覆盖 heading 属性。
|
| header |
可选内容，显示在卡片标题上方，通常用于徽标或标签。
|
| footer |
可选内容，显示在卡片标题下方，通常用于图标、头像或元信息。
|