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 21 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.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.
Librerías relacionadas
Preguntas frecuentes
¿Cómo se abre un action sheet en Angular?
Inyecta HubActionSheet y llama a open() con una cabecera y una lista de botones. En tu plantilla no va nada: el servicio monta la hoja sobre document.body por su cuenta y te devuelve un HubActionSheetRef cuyo result es una promesa que se resuelve con el role y los data de lo que haya elegido el usuario. El componente hub-action-sheet se sigue exportando, pero está deprecado y desaparece en 23.0.0, porque montado a mano resuelve su promesa y luego se queda en pantalla.
¿Cómo se definen los botones de un action sheet?
Como datos, no como contenido proyectado: buttons acepta un array de objetos con text, role, icon, disabled, data, cssClass y handler, y puedes anidarlos en grupos para dibujar separadores. Un botón con role cancel se saca de donde lo hayas declarado y se pinta en su propio bloque de pie, y role destructive da estilo al peligroso. Un handler que devuelve false veta el cierre, que es como se mantiene abierta la hoja tras una acción fallida. icon es una cadena de clases CSS sobre un elemento vacío, así que la fuente de iconos la pones tú.
¿Cómo se cierra el action sheet?
De tres maneras, y cada una se puede desactivar: un clic en el backdrop con backdropDismiss, la tecla Escape con keyboard, y un arrastre hacia abajo sobre el asa con swipeToClose, que cierra en cuanto el arrastre pasa de 64 píxeles o de un cuarto de la altura de la hoja. Elegir una acción también la cierra, y ref.dismiss() la cierra desde tu propio código. provideHubActionSheet() fija esos valores por defecto para toda la aplicación, y el handler de un botón cancel se ejecuta en cualquier cierre, así que una sola limpieza cubre todas las salidas.
¿Se convierte el action sheet en un popover o en un diálogo en escritorio?
No. En su hoja de estilos no hay un solo breakpoint: en una pantalla ancha tienes la misma hoja anclada abajo, limitada a 34rem y centrada horizontalmente. Si lo que quieres es un menú anclado al botón que lo abrió, este no es el componente. Dos cosas más antes de tirar de él: open() acude a document de inmediato, así que tiene que ejecutarse en el navegador y no durante el renderizado en servidor, y la hoja atrapa el Tab pero no deja inerte la página que queda detrás, así que un lector de pantalla todavía puede colarse ahí.