API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	ボタンの視覚スタイル：solid、outline、soft、ghost、または link。
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	ボタンのセマンティックアクセント。オープンセット：9 つの組み込みアクセントのいずれか、hub-btn-color-rules() で登録したカスタムアクセント、CSS の名前付きカラー、またはリテラル（#hex、rgb()、oklch()、var(...)）。すべてのロールカラーの導出元である --hub-btn-accent スロットに供給されます。
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	ボタンのサイズトークン：sm、md、lg、または xl。
`loading (hub-button)`	`boolean`	`false`	アニメーションするスピナーを表示し、ボタンをビジーかつ無効の状態にします：aria-busy="true" とネイティブの disabled 属性を反映し、タブ順序から除外して、ポインター／キーボードによるアクティベーションをブロックするため、処理中の送信が二度発火することはありません。
`disabled (hub-button)`	`boolean`	`false`	ボタンを無効化し、ホスト要素にネイティブの disabled 属性を反映します。
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	FAB の背景のセマンティックアクセント。組み込みのアクセント、または --hub-fab-accent スロットを通じた任意のカスタム／リテラルカラーを受け付けます。
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	円形 FAB の直径：mini、standard、または large。
`extended (hub-fab)`	`boolean`	`false`	FAB を拡張ピルとしてレンダリングし、アイコンの隣に投影された [slot=label] コンテンツを表示します。
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	9 スロットのグリッド上での FAB の固定ビューポート位置。RTL サポートのために CSS 論理プロパティで実装されています。
`collapseOnScroll (hub-fab)`	`boolean`	`false`	true の場合、ページが 50px を超えてスクロールされると、拡張 FAB はアイコンのみの表示に折りたたまれます。
`disabled (hub-fab)`	`boolean`	`false`	FAB を無効化し、hub-fab-disabled の外観を適用します。
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	スピードダイヤルのトリガー FAB に塗られるセマンティックアクセント。組み込みのアクセント、または任意のカスタム／リテラルカラーを受け付けます。
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	トリガー FAB のサイズ：mini、standard、または large。
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	9 スロットの FAB グリッド上でのスピードダイヤルの固定ビューポート位置。
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	アクション項目がトリガーから展開する方向：up、down、left、または right。
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	スピードダイヤルを開くインタラクション：click はトグルし、hover は mouseenter で開いて mouseleave で閉じます。
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	スピードダイヤルの双方向バインド可能な開閉状態（model シグナル）。Escape キーを押すと自動的に閉じます。
`icon (hub-speed-dial-item)`必須	`string`	—	アクションアイコン用の CSS クラス文字列。項目ボタンの内部で <i [class]="icon()"> としてレンダリングされます。label が設定されていない場合は aria-label のフォールバックとしても使用されます。
`label (hub-speed-dial-item)`	`string`	`''`	アクションボタンの隣に表示されるツールチップラベル。アクセシブルな aria-label としても使用されます。
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	アクションボタンのセマンティックアクセント。'default' は中立的な外観を維持します。カスタム／リテラルカラーは --hub-speed-dial-item-accent スロットを通じて塗られます。
`disabled (hub-speed-dial-item)`	`boolean`	`false`	アクション項目ボタンを無効化します。無効な間は itemClick は発行されません。
`hubDropdown ([hubDropdown])`必須	`TemplateRef<any>`	—	body レベルのオーバーレイパネル内にレンダリングされる ng-template。[hubDropdown]="tpl" としてバインドします。
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	トリガー要素に対するパネルの配置。オーバーレイはマッピングされた位置を試し、ビューポートに収まるまでフォールバックします。
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	ドロップダウンを開くインタラクション：click はトグルし、hover は mouseenter で開いて mouseleave で閉じます。
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	true の場合、パネルコンテンツ内のどこかをクリックすると、ドロップダウンが自動的に閉じます。
`disabled ([hubDropdown])`	`boolean`	`false`	ドロップダウンが開かないようにします。
`offsetY ([hubDropdown])`	`number`	`4`	配置軸に沿ったトリガーとパネルの間のオフセット（ピクセル単位）。
`panelClass ([hubDropdown])`	`string`	`''`	デフォルトの hub-dropdown-overlay クラスに加えて、オーバーレイパネルに追加される CSS クラス。
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	ドロップダウンの双方向バインド可能な開閉状態（model シグナル）。Escape、外側のクリック、バックドロップのクリック、ページスクロールで自動的に閉じます。
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	パネル上端のボーダーのセマンティックアクセント。'default' は中立的なボーダーを維持します。
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	項目ラベルの色のセマンティックアクセント。'default' はパネルの色を継承します。
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	ラベルの前に <i [class]="icon()"> としてレンダリングされるアイコン用の、省略可能な CSS クラス文字列。
`disabled (hub-dropdown-item)`	`boolean`	`false`	メニュー項目を無効化します。クリックは無視され、itemClick は発行されません。
`selected (hub-dropdown-item)`	`boolean`	`false`	項目が選択されていることを示すチェックマークインジケーターを表示します。

アウトプット

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

名前	型	説明
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	FAB のアクティベーション用に宣言されたアウトプット。現在の実装では内部から発行されることはありません — 代わりに <hub-fab> のネイティブ (click) イベントをバインドしてください。
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	isOpen モデルが変化するたびに新しい開閉状態を発行します（双方向バインディングの change 側）。
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	スピードダイヤルが開いた後に発行されます。
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	スピードダイヤルが閉じた後に発行されます。Escape キーによって閉じた場合も含みます。
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	アクション項目ボタンがアクティベートされたときに発行されます。
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	isOpen モデルが変化するたびに新しい開閉状態を発行します（双方向バインディングの change 側）。
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	オーバーレイパネルがアタッチされ、ドロップダウンが開いた後に発行されます。
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	ドロップダウンが閉じてオーバーレイが破棄された後に発行されます（Escape、外側のクリック、スクロール、バックドロップ、または closeOnSelect）。
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	メニュー項目がアクティベートされたときに発行されます。項目が無効な間は抑制されます。

テンプレート

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