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

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

最終更新 2026/09/21

概要

チームがこのライブラリを探す理由

行やツールバーのボタンから、現在の画面の上にいくつかの操作を提示したいときに ng-hub-ui-action-sheet を使う。まだ誰も開いていないシートのために、メニューコンポーネントをページに置いておく必要はない。

インストール

npm install ng-hub-ui-action-sheet

ジャンプ

最適な用途

について action-sheet

ng-hub-ui-action-sheet は、サービスからシートを開き、読み手が選んだ結果で一度だけ解決する Angular のスタンドアロンライブラリ。操作にはロールがあり、`cancel` は宣言した場所にかかわらず末尾に置かれ、`destructive` は危険色をまとう。操作は並べても、グループ見出しの下にまとめてもよく、handler は閉じるのを拒否できるので、シートが消える前に確認を挿める。出口は三つ — 背景、`Escape`、シートを下へドラッグする操作 — で、いずれも自分のロールを報告し、先にキャンセル操作の handler を実行する。シートは見出しで名前が付いた `aria-modal` 付きの `role="dialog"` で、開くとフォーカスがその中に移る。

機能ガイド

シートを開く

シートはサービスから開き、一度だけ応答します。閉じている間はページに何も残りません。

サンプル:
シートを開く

見出しと 3 つのアクションと出口。呼び出しは選択で解決します。

Nothing chosen yet
コード
Import:
Template:
Component:

ロールとハンドラー

ロールは各アクションの位置と見え方を決め、ハンドラーはシートを閉じてよいかを決めます。

サンプル:
ロールと拒否するハンドラー

破壊的アクションは初回に失敗し、シートを開いたままにします。

The first attempt always fails, on purpose
コード
Import:
Template:
Component:

アクションのグループ化

独自の見出しを持つブロック。平坦なリストでは読みづらくなる長いシート向けです。

サンプル:
アクションのグループ化

見出し付きブロック、現在の形式のマーク、無効化された 1 件。

Export format: 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.3.0 - 9/21/26, 12:00 AM

added: The sheet animates out, which the animation option already promised. Only the entry had keyframes, so the sheet vanished the instant it settled. The closing pass replays the same keyframes in reverse and the view is destroyed once they finish; with the option off or reduced motion asked for, it leaves at once as before.

Version 22.2.2 - 9/20/26, 12:00 AM

changed: The npm keywords name what the package does — sheet, dialog, menu, overlay, focus-trap, swipe-to-close, accessibility — instead of stopping at the generic ones. Keywords are what npm ranks a search on. Metadata only: no code, types or styles change.

Version 22.2.1 - 9/16/26, 12:00 AM

changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.

Version 22.2.0 - 9/8/26, 12:00 AM

deprecated: `HubActionSheetComponent` is announced for removal in 23.0.0. The entry point exported it while this page said the library has no template API; the page was the true half. The class cannot be used from a template — `sheetRef` demands a `HubActionSheetRef` whose closing half is `@internal` and wired by `HubActionSheet.open()`, so a hand-mounted sheet resolves its promise and then stays on screen behind a fixed backdrop that traps `Tab` across the document. Nothing changes at runtime; this release is the notice. See `BREAKING_CHANGES.md`.

changed: `public-api.ts` lists the component by name instead of re-exporting its whole file, so the symbol on its way out is named where it is exported. `HubResolvedActionSheetOptions` is unaffected and stays exported.

Version 22.1.0 - 9/7/26, 12:00 AM

fixed: A `:root` in the application now reaches the sheet. The `--hub-action-sheet-*` defaults were declared in a `:root, :host` block, and the encapsulation shim turns the `:root` half into a selector nothing matches — so what survived declared every token straight on the `<hub-action-sheet>` element, and a declaration on an element beats an inherited value whatever its specificity. Every `:root` an application wrote for this library was dead, `!important` included. Each token is now read where it is painted, `var(--hub-action-sheet-x, <default>)`, with the same component → design-system → literal chain as before. See `BREAKING_CHANGES.md`: a `:root` block that never did anything starts doing it.

fixed: A `panelClass` that re-bases `--hub-action-sheet-accent` now recolours the selected action. The accent roles were derived on the host, above the element the class lands on, so the derived value was already fixed by the time the branded class changed the slot. They are derived where the colour is painted, so `:root`, `panelClass` and `variant` all recompute the selection.

changed: `--hub-action-sheet-accent-emphasis` is declared on the sheet element rather than on the host. Nothing in the component paints with it — it is the accent family's third role, there for a consumer dressing the sheet — and declaring it beside the accent means a `panelClass` re-basing the slot recomputes it.

changed: The two READMEs and `docs/css-variables-reference.md` say why both entry points work. Setting a token on `:root` and setting it through `panelClass` were documented side by side without saying which wins, and one of the two did not work at all.

Version 22.0.2 - 9/6/26, 12:00 AM

added: `FUNCTIONALITIES.md`, the map every other library in the family already had, so a reader can tell a feature that only lives in a code snippet from one a live example demonstrates.

changed: The configuration surface the package exports is written down: `HUB_ACTION_SHEET_CONFIG`, `HUB_ACTION_SHEET_DEFAULTS` and the `HubActionSheetConfig` interface, whose `variant` and `panelClass` settle an application's accent and sheet class once. Until now the only way to find any of it was to read the sources.

changed: `HubActionSheetRef.settled` is listed in the API tables. It is public and both READMEs already documented it, but the page a reader looks at first did not.

changed: The page's changelog is the released one. It stopped at `22.0.0`, dated before the published `22.0.1`, and its `22.0.0` entry left out `provideHubActionSheet()` and the CSS variable theming the release notes list; a changelog that lags the registry teaches the reader not to trust it.

changed: Both READMEs describe a library on the stable line rather than one in its early stages, and list the family that exists today. The Spanish one also dropped its note announcing documentation pages that have been live for a week, since two READMEs that disagree are worse than one that is merely terse.

fixed: `docs/css-variables-reference.md` gave `--hub-ref-space-1` a default of `0.5rem`, twice the `0.25rem` both readings of the token actually fall back to, so anyone sizing their own scale from that table was working from the wrong number. The two design-system tokens it omitted, `--hub-sys-color-surface-subtle` and `--hub-sys-color-ink`, are listed as well.

fixed: The hover background of an action falls back to `#f8f9fa`, the value it is declared with, instead of an `rgba(0, 0, 0, 0.05)` literal that could never be reached and contradicted the documented default.

fixed: The action with the `selected` role announces itself with `aria-current="true"` instead of `aria-checked`, which is not defined for a plain button and left the state visible only to readers who could see the sheet.

Version 22.0.1 - 9/1/26, 12:00 AM

changed: The `homepage` in the package manifest points at this library's own documentation page rather than at the site root. Metadata only — nothing a consumer imports is affected.

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.

added: `provideHubActionSheet()` sets the defaults every sheet starts from — the four behaviour flags plus `variant` and `panelClass` — overridable per call.

added: CSS variable theming through the `--hub-action-sheet-*` tokens, with the semantic accent on the single-slot contract the rest of the family uses (`variant`), and motion that steps aside under `prefers-reduced-motion`.

removed: The placeholder `ActionSheet` component (selector `lib-action-sheet`) that the pre-release package shipped.

よくある質問

Angular でアクションシートを開くには?

HubActionSheet を注入し、ヘッダーとボタンのリストを渡して open() を呼びます。テンプレートに置くものはありません。サービス自身がシートを document.body にマウントし、HubActionSheetRef を返します。その result は Promise で、ユーザーが選んだものの role と data で解決します。hub-action-sheet コンポーネントもまだエクスポートされていますが非推奨で、23.0.0 で削除されます。手動でマウントすると、Promise を解決したあとも画面に残ってしまうからです。

アクションシートのボタンはどう定義しますか?

投影するコンテンツではなく、素のデータとして定義します。buttons は text、role、icon、disabled、data、cssClass、handler を持つオブジェクトの配列を取り、グループに入れ子にすると区切りが描かれます。role が cancel のボタンは宣言した場所から引き上げられ、専用のフッターブロックに描画されます。role が destructive のものには危険なアクションとしてのスタイルが付きます。handler が false を返すとクローズが拒否されるので、アクションが失敗したときにシートを開いたままにできます。icon は空の要素に付ける CSS クラスの文字列なので、アイコンフォントは自分で用意します。

アクションシートはどうやって閉じますか?

3 通りあり、どれも個別に無効にできます。backdropDismiss によるバックドロップのクリック、keyboard による Escape キー、そして swipeToClose によるグリップの下方向へのドラッグで、ドラッグが 64 ピクセルかシート高さの 4 分の 1 を超えた時点で閉じます。アクションを選んでも閉じますし、自分のコードからは ref.dismiss() で閉じられます。provideHubActionSheet() がアプリケーション全体の既定値を決めます。cancel ボタンの handler はどの閉じ方でも実行されるので、後片付けを 1 か所書けばすべての出口をカバーできます。

デスクトップではポップオーバーやダイアログに変わりますか?

変わりません。スタイルシートにはブレークポイントが 1 つもなく、広い画面でも同じシートが下端に固定され、最大 34rem で水平方向に中央寄せされます。押したボタンにアンカーされるメニューが欲しいなら、これは違うコンポーネントです。手を出す前に知っておきたいことがもう 2 つあります。open() はすぐに document に触れるので、サーバーレンダリング中ではなくブラウザーで実行する必要があります。そしてシートは Tab を閉じ込めますが、背後のページを inert にはしないため、スクリーンリーダーはそこへ迷い込めます。