Angular Kanban 看板组件 | ng-hub-ui-board
Angular Kanban 看板组件,支持拖放、自定义卡片模板、列工作流和 CSS 变量,适用于业务仪表盘。
API 参考
这里是 board 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。
输入
通过 5 个输入项精细调校 board。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
board | Board | undefined | 要渲染的完整看板定义:一个对象,其 columns 数组承载组件所显示的列与卡片数据。 |
boardLabel | string | 'Board' | 看板列表容器的无障碍名称。 |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | string | undefined | 拖放占位符的语义强调色。接受设计系统内置的强调色、任何已注册的自定义强调色名称,或字面颜色值(#hex、rgb()、oklch()、CSS 命名颜色);未设置时默认为 primary 强调色。 |
columnSortingDisabled | boolean | false | 为 true 时,整个看板都将禁止通过拖放对列重新排序。 |
dragBehavior | 'ghost' | 'hide' | 'collapse' | 'collapse' | 控制拖动期间被拖动元素的外观:'ghost' 使其以半透明保持可见,'hide' 使其不可见但保留其占位空间,'collapse' 则将元素及其空间完全移除。 |
输出
响应 board 的行为——有 4 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
onCardClick | EventEmitter<BoardCard> | 每当看板内的某张卡片被点击时,发出被点击的卡片。 |
onCardMoved | EventEmitter<CardDragDropEvent> | 当卡片通过指针拖动或键盘移动被重新定位(在其所在列内或移入另一列)时发出,附带之前/当前索引以及源/目标列。 |
onColumnMoved | EventEmitter<ColumnDragDropEvent> | 当通过拖放对列重新排序时发出,附带之前和当前的列索引。 |
reachedEnd | EventEmitter<ReachedEndEvent> | 当某列主体滚动到底部时发出,附带该列的索引与数据——可用于实现无限滚动加载。 |
模板
尚未记录任何模板。