API リファレンス

toast の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプットはまだドキュメント化されていません。

アウトプットはまだドキュメント化されていません。

テンプレートはまだドキュメント化されていません。

15 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

トーストのサイズ、ボーダー半径、パディング、シャドウを制御するトークン。

変数	デフォルト	型	説明
`--hub-toast-width`	`22rem`	length	各トーストカードの最大幅。 `18rem26rem`
`--hub-toast-border-radius`	`0.375rem`	length	トーストカードの角丸半径。 `00.75rem`
`--hub-toast-padding-x`	`1rem`	length	トースト本文内の水平パディング。 `0.75rem1.25rem`
`--hub-toast-padding-y`	`0.75rem`	length	トースト本文内の垂直パディング。 `0.5rem1rem`
`--hub-toast-gap`	`0.5rem`	length	コンテナ内で積み重なったトースト間の間隔。 `0.25rem0.75rem`
`--hub-toast-shadow`	`0 2px 8px rgba(0,0,0,.25)`	shadow	トーストカードが落とすボックスシャドウ。 `none0 4px 20px rgba(0,0,0,.18)`

背景、前景、アクセントのトークン。組み込みタイプは --hub-sys-color-<type>-* からアクセントを上書きします。

変数	デフォルト	型	説明
`--hub-toast-bg`	`#323232`	color	トーストカードの背景色。 `#fffvar(--bs-dark)`
`--hub-toast-color`	`#ffffff`	color	トースト本文のテキスト色。 `#212529var(--bs-body-color)`
`--hub-toast-title-color`	`inherit`	color	トースト見出しのテキスト色。 `#fffvar(--bs-emphasis-color)`
`--hub-toast-accent`	`transparent`	color	左ボーダーまたはハイライトの色。組み込みタイプでは DS トークンファミリーから自動的に設定されます。 `var(--hub-sys-color-primary)#0d6efd`

トースト下部に表示されるカウントダウンバー用のトークン。

変数	デフォルト	型	説明
`--hub-toast-progress-height`	`4px`	length	プログレスバーのストリップの高さ。 `2px6px`
`--hub-toast-progress-bg`	`rgba(255,255,255,.4)`	color	プログレスバーの塗りつぶしの背景色。 `rgba(0,0,0,.2)var(--bs-primary)`

表示中のすべてのトーストを収める固定オーバーレイコンテナ用のトークン。

変数	デフォルト	型	説明
`--hub-toast-container-gap`	`0.5rem`	length	コンテナ内で連続するトースト間の垂直方向の間隔。 `0.25rem1rem`
`--hub-toast-container-offset`	`1rem`	length	画面の端からコンテナまでの距離。 `0.5rem2rem`
`--hub-toast-zindex`	`1090`	number	他のオーバーレイに対するトーストコンテナの重なり順。 `10509999`

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