Angular Kanban 看板组件 | ng-hub-ui-board

Angular Kanban 看板组件,支持拖放、自定义卡片模板、列工作流和 CSS 变量,适用于业务仪表盘。

API 参考

这里是 board 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。

输入

通过 5 个输入项精细调校 board。像绑定任意 Angular @Input 一样绑定它们。

名称类型默认值描述
boardBoardundefined要渲染的完整看板定义:一个对象,其 columns 数组承载组件所显示的列与卡片数据。
boardLabelstring'Board'看板列表容器的无障碍名称。
variant'primary' | 'success' | 'danger' | 'warning' | 'info' | stringundefined拖放占位符的语义强调色。接受设计系统内置的强调色、任何已注册的自定义强调色名称,或字面颜色值(#hex、rgb()、oklch()、CSS 命名颜色);未设置时默认为 primary 强调色。
columnSortingDisabledbooleanfalse为 true 时,整个看板都将禁止通过拖放对列重新排序。
dragBehavior'ghost' | 'hide' | 'collapse''collapse'控制拖动期间被拖动元素的外观:'ghost' 使其以半透明保持可见,'hide' 使其不可见但保留其占位空间,'collapse' 则将元素及其空间完全移除。

输出

响应 board 的行为——有 4 个事件可供你挂接逻辑。

名称类型描述
onCardClickEventEmitter<BoardCard>每当看板内的某张卡片被点击时,发出被点击的卡片。
onCardMovedEventEmitter<CardDragDropEvent>当卡片通过指针拖动或键盘移动被重新定位(在其所在列内或移入另一列)时发出,附带之前/当前索引以及源/目标列。
onColumnMovedEventEmitter<ColumnDragDropEvent>当通过拖放对列重新排序时发出,附带之前和当前的列索引。
reachedEndEventEmitter<ReachedEndEvent>当某列主体滚动到底部时发出,附带该列的索引与数据——可用于实现无限滚动加载。

模板

尚未记录任何模板。