API リファレンス

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

インプット

20 個のインプットで badges を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`variant`	`HubBadgeVariant`	`'solid'`	バッジシェルの視覚的なスタイル。
`color`	`HubBadgeColor`	`'primary'`	セマンティックカラーファミリー。組み込み値はデザインシステムのトークンファミリーに対応し、カスタム名もサポートします。
`size`	`HubBadgeSize`	`'md'`	バッジのサイズスケール。
`shape`	`HubBadgeShape`	`'pill'`	バッジシェルの角の形状。
`dot`	`boolean`	`false`	ラベルの前にステータスドットを表示します。
`removable`	`boolean`	`false`	削除操作を有効にし、バッジを削除可能なフィルター/タグにします。
`removeLabel`	`string`	`'Remove badge'`	削除ボタンに適用されるアクセシブルなラベル。
`tooltip`	`string`	`''`	明示的なツールチップテキスト。省略した場合、内容が切り詰められているときのみバッジ自身の内容をツールチップとして表示します。
`interactive`	`boolean`	`false`	バッジをインタラクティブなトグルに変えます：role="button"、キーボードのタブストップを公開し、有効化時に selected 出力を発行します。
`active`	`boolean`	`false`	インタラクティブなバッジの押下／選択状態を反映し、.hub-badge--active と aria-pressed 属性を切り替えます。
`dotOverlay`	`boolean`	`false`	ステータスドットを、インラインの先頭ドットの代わりに、バッジシェルに固定された角のオーバーレイとしてレンダリングします。
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	dotOverlay が有効なときにオーバーレイドットが固定される角（例：top-end、top-start、bottom-end、bottom-start）。
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip：チップの双方向の selected（押下）状態です。
`hub-chip · value`	`unknown`	`undefined`	hub-chip：内包する hub-chip-set 内でチップを識別する不透明な値です。
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip：チップの色を決めるセマンティックなアクセントで、hub-badge と共有されます。
`hub-chip · disabled`	`boolean`	`false`	hub-chip：チップを無効化します — トグルも削除も行えず、タブ順序から除外されます。
`hub-chip · removable`	`boolean`	`false`	hub-chip：バッジの削除パターンを踏襲した、破棄アフォーダンスを有効にします。
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip：破棄ボタンのアクセシブルなラベルです。
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set：一度に 1 つ（single）または複数（multiple）のチップを選択できるかどうか。
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set：双方向の選択値 — single モードでは選択されたチップの値、multiple モードでは選択された値の配列です。

アウトプット

badges の動作に反応 — ロジックを接続できる 6 個のイベント。

名前	型	説明
`removed`	`EventEmitter<void>`	削除可能なバッジの削除アクションが実行されたときに発行されます。
`selected`	`EventEmitter<void>`	インタラクティブなバッジがクリック、Enter、または Space によって有効化されたときに発行されます。
`hub-chip · selectedChange`	`EventEmitter<boolean>`	hub-chip：双方向の selected 状態が変化するたびに発行されます。
`hub-chip · removed`	`EventEmitter<void>`	hub-chip：破棄ボタンが有効化されたときに発行されます。
`hub-chip · chipClick`	`EventEmitter<void>`	hub-chip：有効化のたびに（クリック／Enter／Space）、トグルが適用される前に発行されます。
`hub-chip-set · valueChange`	`EventEmitter<unknown>`	hub-chip-set：双方向の選択値が変化するたびに発行されます。

テンプレート

自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`[hubChipLeading]`	先頭アイコンまたはアバターをチップに投影し、チップコンテンツの前にレンダリングします。	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`