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)`

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。