Лист действий для Angular | ng-hub-ui-action-sheet

Лист действий для Angular, открываемый из сервиса: действия с ролями, плоские или сгруппированные, обработчики, способные отказать в закрытии, и закрытие фоном, клавиатурой или перетаскиванием.

Последнее обновление 30 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

SEO.LIBRARY.ACTION_SHEET.INTRO

Установка

npm install ng-hub-ui-action-sheet

Перейти к

Идеально для

О библиотеке action-sheet

SEO.LIBRARY.ACTION_SHEET.OVERVIEW

Руководства по возможностям

Открытие листа

Лист открывается из сервиса и отвечает один раз, поэтому, пока он закрыт, на странице от него ничего не остаётся.

Примеры:
Открытие листа

Заголовок, три действия и выход; вызов разрешается выбором.

Nothing chosen yet
Код
Import:
Template:
Component:

Роли и обработчики

Роль решает, где стоит действие и как оно читается; обработчик решает, может ли лист закрыться.

Примеры:
Роли и обработчик, который отказывает

Деструктивное действие в первый раз падает и оставляет лист открытым.

The first attempt always fails, on purpose
Код
Import:
Template:
Component:

Сгруппированные действия

Блоки с собственными заголовками — для листа, который слишком длинен, чтобы плоский список читался.

Примеры:
Сгруппированные действия

Блоки с заголовками, текущий формат отмечен, одно действие отключено.

Export format: pdf
Код
Import:
Template:
Component:

Акцент и токены

Один семантический акцент на весь лист и 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.

Связанные библиотеки

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-buttons