API 参考

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

尚未记录任何输入项。

尚未记录任何输出项。

尚未记录任何模板。

用 24 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。

控制 board 列的整体布局、间距和结构

变量	默认值	类型	描述
`--hub-column-bg`	`#f8f9fa`	color	board 列的背景颜色 `#ffffff#f8f9fatransparent`
`--hub-column-color`	`#212529`	color	board 列内的文本颜色 `#333333rgb(33, 37, 41)var(--bs-body-color)`
`--hub-column-border-color`	`#dee2e6`	color	board 列周围的边框颜色 `#e9ecefvar(--bs-border-color)transparent`
`--hub-column-border-width`	`1px`	length	列边框的宽度 `02px0.5rem`
`--hub-column-border-radius`	`0.375rem`	length	列圆角的边框半径 `00.5rem1rem16px`
`--hub-column-gap`	`1rem`	length	列之间的间距 `0.5rem1.5rem2rem`
`--hub-column-padding`	`1rem`	length	列内部的内边距 `0.75rem1.25rem1.5rem`

自定义列头和列脚的外观

变量	默认值	类型	描述
`--hub-column-cap-bg`	`#ffffff`	color	列头的背景颜色 `#f8f9favar(--bs-light)transparent`
`--hub-column-cap-color`	`#212529`	color	列头的文本颜色 `#495057var(--bs-dark)#333`
`--hub-column-cap-padding`	`0.75rem 1rem`	length	列头内部的内边距 `0.5rem 1rem1rem 1.25rem1rem`
`--hub-column-cap-border-bottom`	`1px solid #dee2e6`	border	列头的底部边框 `2px solid #dee2e6none1px dashed #ccc`

自定义列内单个卡片的外观

变量	默认值	类型	描述
`--hub-card-bg`	`#ffffff`	color	卡片的背景颜色 `#f8f9fargba(255,255,255,0.9)transparent`
`--hub-card-color`	`#212529`	color	卡片的文本颜色 `#333333var(--bs-body-color)#495057`
`--hub-card-border`	`1px solid #dee2e6`	border	卡片周围的边框 `2px solid #dee2e6none1px dashed #ccc`
`--hub-card-border-radius`	`0.375rem`	length	卡片圆角的边框半径 `00.5rem0.75rem12px`
`--hub-card-padding`	`1rem`	length	卡片内部的内边距 `0.75rem1.25rem1rem 1.5rem`
`--hub-card-margin`	`0.5rem 0`	length	卡片周围的外边距 `0.25rem 00.75rem 01rem 0`
`--hub-card-shadow`	`0 2px 4px rgba(0,0,0,0.1)`	shadow	卡片的阴影 `0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none`

拖放交互的视觉反馈和状态

变量	默认值	类型	描述
`--hub-card-hover-shadow`	`0 4px 8px rgba(0,0,0,0.15)`	shadow	悬停在卡片上时的增强阴影 `0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none`
`--hub-card-dragging-opacity`	`0.5`	number	卡片被拖动时的不透明度 `0.30.70.8`
`--hub-drop-zone-bg`	`rgba(0,123,255,0.1)`	color	活动放置区域的背景颜色 `rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent`
`--hub-drop-zone-border`	`2px dashed #007bff`	border	活动放置区域的边框样式 `3px solid #28a7451px dotted #ffc107none`

控制动画和过渡的时序与缓动

变量	默认值	类型	描述
`--hub-transition-duration`	`0.2s`	string	标准过渡的持续时间 `0.15s0.3s0.4s`
`--hub-transition-easing`	`ease-in-out`	string	过渡的缓动函数 `easelinearcubic-bezier(0.4, 0, 0.2, 1)`

尚未记录任何样式示例。本节将包含自定义方案和主题示例。