Angular 操作面板 | ng-hub-ui-action-sheet
由服务打开的 Angular 操作面板：带角色的操作、平铺或分组、可拒绝关闭的处理函数，以及通过背景、键盘或拖动关闭。
最后更新 2026年8月30日
概览
团队为何搜索这个库
SEO.LIBRARY.ACTION_SHEET.INTRO
安装
npm install ng-hub-ui-action-sheet跳转到
适用于
关于 action-sheet
SEO.LIBRARY.ACTION_SHEET.OVERVIEW
功能指南
打开操作面板
面板由服务打开并只应答一次，因此关闭时页面上不会留下它的任何内容。
示例:
打开操作面板
一个标题、三个操作和一个出口；调用以选择结束。
代码
导入:
模板:
组件:
角色与处理函数
角色决定每个操作的位置与语气；处理函数决定面板是否可以关闭。
示例:
角色与会拒绝的处理函数
破坏性操作首次失败，并让面板保持打开。
代码
导入:
模板:
组件:
分组操作
带自有标题的分块，适用于长到平铺列表已难以阅读的面板。
示例:
分组操作
带标题的分块、标记当前格式，以及一个禁用项。
pdf代码
导入:
模板:
组件:
强调色与令牌
整个面板一个语义强调色，其下每个视觉决定各有一个 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.
代码
导入:
模板:
组件:
核心特性
最近更改
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.