Angular アクションシート | ng-hub-ui-action-sheet
サービスから開く Angular のアクションシート。ロール付きのアクション、平坦またはグループ化、閉じるのを拒否できるハンドラー、背景・キーボード・ドラッグによる終了。
最終更新 2026/08/30
概要
チームがこのライブラリを探す理由
SEO.LIBRARY.ACTION_SHEET.INTRO
インストール
npm install ng-hub-ui-action-sheetジャンプ
最適な用途
について action-sheet
SEO.LIBRARY.ACTION_SHEET.OVERVIEW
機能ガイド
シートを開く
シートはサービスから開き、一度だけ応答します。閉じている間はページに何も残りません。
サンプル:
シートを開く
見出しと 3 つのアクションと出口。呼び出しは選択で解決します。
コード
Import:
Template:
Component:
ロールとハンドラー
ロールは各アクションの位置と見え方を決め、ハンドラーはシートを閉じてよいかを決めます。
サンプル:
ロールと拒否するハンドラー
破壊的アクションは初回に失敗し、シートを開いたままにします。
コード
Import:
Template:
Component:
アクションのグループ化
独自の見出しを持つブロック。平坦なリストでは読みづらくなる長いシート向けです。
サンプル:
アクションのグループ化
見出し付きブロック、現在の形式のマーク、無効化された 1 件。
pdfコード
Import:
Template:
Component:
アクセントとトークン
シート全体に効く 1 つのセマンティックアクセントと、その下の各視覚要素の CSS 変数。
サンプル:
アクセントとトークン
同じシートをセマンティックアクセントとブランドトークンで。
The accent colours the selected action; the branded sheet also changes its radius, its touch targets and the width it is allowed to take.
コード
Import:
Template:
Component:
主な機能
最近の変更
Version 22.0.0 - 8/30/26, 12:00 AM
added: `HubActionSheet.open()` returns a `HubActionSheetRef` whose `result` resolves once, with the role and data of the chosen action or with how the sheet was dismissed.
added: Actions with roles: `cancel` is set apart at the end wherever it was declared, `destructive` reads in the danger colour, `selected` is marked, and a handler returning `false` keeps the sheet open.
added: Grouped actions with an optional title per block, plus header and sub-header.
added: Dismissal by backdrop, `Escape` and by dragging the sheet down, each reporting its own role and running the cancel action first.
added: `role="dialog"` with `aria-modal`, focus moved in on open, trapped while the sheet lives and returned to the opener on close.
removed: The placeholder `ActionSheet` component (selector `lib-action-sheet`) that the pre-release package shipped.