Angular アクションシート | ng-hub-ui-action-sheet

サービスから開く Angular のアクションシート。ロール付きのアクション、平坦またはグループ化、閉じるのを拒否できるハンドラー、背景・キーボード・ドラッグによる終了。

API リファレンス

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

インプット

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

名前型デフォルト説明
buttons必須(HubActionSheetButton | HubActionSheetGroup)[]—アクション。平坦にも、見出し付きグループにもできます。
headerstring—シートのタイトルであり、アクセシブルネーム。
subHeaderstring—見出しの下の補助行。
variantstring—セマンティックアクセント。--hub-sys-color-<variant> として読まれます。
backdropDismissbooleantrue背景をクリックするとシートを閉じます。
keyboardbooleantrueEscape でシートを閉じます。
swipeToClosebooleantrueしきい値を超えて下へドラッグすると閉じます。
animationbooleantrue開閉をアニメーションします。prefers-reduced-motion では無視されます。
panelClassstring | string[]—シート要素への追加クラス。1 枚だけを装飾するために。
ariaLabelstring—見出しがない場合のアクセシブルネーム。

アウトプット

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

メソッド

action-sheet をコードから操作 — プログラム操作のための 8 個のメソッドを備えています。

名前シグネチャ戻り値説明
HubActionSheet.openopen<D>(options: HubActionSheetOptions<D>): HubActionSheetRef<D>—シートをドキュメントにマウントし、その結果へのハンドルを返します。
HubActionSheetRef.resultresult: Promise<HubActionSheetResult<D>>—一度だけ解決します。選択されたアクションのロールとデータ、または閉じられ方で。
HubActionSheetRef.closed$closed$: Observable<HubActionSheetResult<D>>—result と同じ値を、ストリームで扱う利用側のために。
HubActionSheetRef.dismissdismiss(role?: 'backdrop' | 'escape' | 'swipe' | string): void—外部からシートを閉じ、指定したロールを報告します。
HubActionSheetRef.settledsettled: boolean—シートがすでに結果を返したかどうか。開いているシートと閉じたシートを呼び出し側が見分けられます。
provideHubActionSheetprovideHubActionSheet(config: Partial<HubActionSheetConfig>): EnvironmentProviders—すべてのシートの出発点となるアプリ全体の既定値を設定します。4 つの挙動フラグに加えて variant と panelClass も含みます。
HUB_ACTION_SHEET_CONFIGInjectionToken<HubActionSheetConfig>—サービスが読み取るトークン。直接提供すると、設定を統合せず丸ごと置き換えます。
HUB_ACTION_SHEET_DEFAULTSHubActionSheetConfig—誰も指定しないときのシートの動作: backdropDismiss、keyboard、swipeToClose、animation がすべて true。

テンプレート

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