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 6 sept 2026
Visión General
Por qué los equipos buscan esta librería
Usa ng-hub-ui-action-sheet cuando una fila o un botón de una barra tenga que ofrecer unas pocas acciones sobre la pantalla actual, sin que un componente de menú se quede en la página por una hoja que nadie ha abierto.
Instalación
npm install ng-hub-ui-action-sheetIr a
Ideal para
Sobre action-sheet
ng-hub-ui-action-sheet es una biblioteca standalone de Angular que abre una hoja desde un servicio y resuelve una sola vez con lo que haya elegido el lector. Las acciones llevan un rol: `cancel` se separa al final, se declare donde se declare, y `destructive` va en el color de peligro. Pueden ir sueltas o bajo títulos de grupo, y un handler puede negar el cierre, de modo que una confirmación se ejecuta antes de que la hoja desaparezca. Hay tres formas de salir — el fondo, `Escape` y un arrastre de la hoja hacia abajo —, cada una informa de su propio rol y cada una ejecuta antes el handler de la acción de cancelar. La hoja es un `role="dialog"` con `aria-modal`, nombrada por su cabecera, y el foco entra en ella al abrirse.
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.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.