Hoja de acciones para Angular | ng-hub-ui-action-sheet
Hoja de acciones para Angular abierta desde un servicio: acciones con rol, sueltas o agrupadas, handlers que pueden negar el cierre, y cierre por fondo, teclado o arrastre.
Última actualización 30 ago 2026
Visión General
Por qué los equipos buscan esta librería
SEO.LIBRARY.ACTION_SHEET.INTRO
Instalación
npm install ng-hub-ui-action-sheetIr a
Ideal para
Sobre action-sheet
SEO.LIBRARY.ACTION_SHEET.OVERVIEW
Guías de uso
Abrir una hoja
La hoja se abre desde un servicio y responde una sola vez, así que mientras está cerrada no queda nada de ella en la página.
Ejemplos:
Abrir una hoja
Cabecera, tres acciones y una salida; la llamada se resuelve con la elección.
Código
Import:
Template:
Component:
Roles y handlers
El rol decide dónde se sitúa cada acción y cómo se lee; el handler decide si la hoja puede cerrarse.
Ejemplos:
Roles y un handler que se niega
La acción destructiva falla la primera vez y mantiene la hoja abierta.
Código
Import:
Template:
Component:
Acciones agrupadas
Bloques con título propio, para una hoja lo bastante larga como para que una lista plana deje de leerse.
Ejemplos:
Acciones agrupadas
Bloques con título, el formato actual marcado y una acción deshabilitada.
pdfCódigo
Import:
Template:
Component:
Acento y tokens
Un acento semántico para toda la hoja, y una variable CSS para cada decisión visual por debajo.
Ejemplos:
Acento y tokens
La misma hoja con acento semántico, y con tokens de marca.
The accent colours the selected action; the branded sheet also changes its radius, its touch targets and the width it is allowed to take.
Código
Import:
Template:
Component:
Características clave
Cambios recientes
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.