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`	`OutputEmitterRef<BoardCard>`	每当看板内的某张卡片被点击时，发出被点击的卡片。
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	当卡片通过指针拖动或键盘移动被重新定位（在其所在列内或移入另一列）时发出，附带之前/当前索引以及源/目标列。
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	当通过拖放对列重新排序时发出，附带之前和当前的列索引。
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	当某列主体滚动到底部时发出，附带该列的索引与数据——可用于实现无限滚动加载。

模板

打造你自己的样式——7 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`cardTpt`	替换卡片的默认内容。模板上下文提供 item（卡片）与 column（所属列），因此应绑定 let-card="item"。	`<hub-board [board]="board()"> <ng-template cardTpt let-card="item" let-column="column"> <strong>{{ card.title }}</strong> <small>{{ column.title }}</small> </ng-template> </hub-board>`
`columnHeaderTpt`	替换列的默认表头。模板上下文提供 column。	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	在列内容下方添加页脚。模板上下文提供 column；未提供模板时不渲染页脚。	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	拖拽卡片时显示的自定义放置区域。上下文提供 card（被拖拽的卡片）与 column（目标列）。	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	拖拽列时显示的自定义放置区域。上下文提供 column（被拖拽的列）。	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	拖拽卡片时跟随光标的自定义元素。上下文提供 card 与 column（来源列）。	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	拖拽列时跟随光标的自定义元素。上下文提供 column。	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`