Angular Action Sheet | ng-hub-ui-action-sheet
Angular Action Sheet, aus einem Service geöffnet: Aktionen mit Rollen, flach oder gruppiert, Handler, die das Schließen verweigern können, und Schließen per Hintergrund, Tastatur oder Ziehen.
Zuletzt aktualisiert 21.09.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Verwende ng-hub-ui-action-sheet, wenn eine Zeile oder eine Schaltfläche in einer Leiste ein paar Aktionen über dem aktuellen Bildschirm anbieten soll, ohne dass eine Menükomponente für ein Sheet in der Seite steht, das niemand geöffnet hat.
Installieren
npm install ng-hub-ui-action-sheetSpringen zu
Ideal für
Über action-sheet
ng-hub-ui-action-sheet ist eine standalone Angular-Bibliothek, die ein Sheet aus einem Service öffnet und genau einmal mit der Wahl des Lesers auflöst. Aktionen tragen eine Rolle: `cancel` steht am Ende, gleich wo es deklariert wurde, und `destructive` erhält die Gefahrenfarbe. Sie lassen sich flach oder unter Gruppentiteln auflisten, und ein Handler kann das Schließen verweigern, sodass vorher eine Bestätigung läuft. Es gibt drei Wege hinaus — den Hintergrund, `Escape` und das Herunterziehen des Sheets —, jeder meldet seine eigene Rolle und führt zuerst den Handler der Abbrechen-Aktion aus. Das Sheet ist ein `role="dialog"` mit `aria-modal`, benannt durch seine Kopfzeile, und der Fokus wandert beim Öffnen hinein.
Funktionsleitfäden
Ein Blatt öffnen
Das Blatt wird aus einem Service geöffnet und antwortet genau einmal; solange es geschlossen ist, bleibt nichts davon auf der Seite.
Beispiele:
Ein Blatt öffnen
Überschrift, drei Aktionen und ein Ausweg; der Aufruf löst mit der Wahl auf.
Code
Import:
Template:
Component:
Rollen und Handler
Die Rolle entscheidet, wo eine Aktion steht und wie sie gelesen wird; der Handler entscheidet, ob das Blatt schließen darf.
Beispiele:
Rollen und ein Handler, der sich weigert
Die destruktive Aktion scheitert beim ersten Mal und hält das Blatt offen.
Code
Import:
Template:
Component:
Gruppierte Aktionen
Blöcke mit eigenem Titel, für ein Blatt, das zu lang ist, als dass eine flache Liste noch lesbar wäre.
Beispiele:
Gruppierte Aktionen
Betitelte Blöcke, das aktuelle Format markiert und eine Aktion deaktiviert.
pdfCode
Import:
Template:
Component:
Akzent und Tokens
Ein semantischer Akzent für das ganze Blatt und eine CSS-Variable für jede visuelle Entscheidung darunter.
Beispiele:
Akzent und Tokens
Dasselbe Blatt mit semantischem Akzent und mit Marken-Tokens.
The accent colours the selected action; the branded sheet also changes its radius, its touch targets and the width it is allowed to take.
Code
Import:
Template:
Component:
Hauptfunktionen
Letzte Änderungen
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.
Verwandte Bibliotheken
Häufig gestellte Fragen
Wie öffne ich in Angular ein Action Sheet?
Injizieren Sie HubActionSheet und rufen Sie open() mit einem Header und einer Liste von Buttons auf. In Ihr Template kommt nichts: Der Service hängt das Sheet selbst an document.body und gibt ein HubActionSheetRef zurück, dessen result ein Promise ist, das mit role und data der getroffenen Auswahl auflöst. Die Komponente hub-action-sheet wird weiterhin exportiert, ist aber deprecated und verschwindet in 23.0.0, denn von Hand eingehängt löst sie ihr Promise auf und bleibt anschließend stehen.
Wie definiere ich die Buttons eines Action Sheets?
Als schlichte Daten, nicht als projizierten Inhalt: buttons nimmt ein Array von Objekten mit text, role, icon, disabled, data, cssClass und handler, und Sie können sie in Gruppen verschachteln, um Trenner zu zeichnen. Ein Button mit role cancel wird aus der Stelle herausgehoben, an der Sie ihn deklariert haben, und in einem eigenen Footer-Block gerendert; role destructive gestaltet den gefährlichen. Ein handler, der false zurückgibt, legt sein Veto gegen das Schließen ein — so halten Sie das Sheet nach einer gescheiterten Aktion offen. icon ist ein CSS-Klassen-String auf einem leeren Element, die Icon-Schrift liefern also Sie.
Wie wird das Action Sheet geschlossen?
Auf drei Wegen, von denen jeder abschaltbar ist: ein Klick auf den Backdrop über backdropDismiss, die Escape-Taste über keyboard und ein Zug nach unten am Griff über swipeToClose, das schließt, sobald der Zug 64 Pixel oder ein Viertel der Sheet-Höhe überschreitet. Eine Aktion auszuwählen schließt es ebenfalls, und ref.dismiss() schließt es aus Ihrem eigenen Code heraus. provideHubActionSheet() setzt diese Vorgaben für die gesamte Anwendung, und der handler eines cancel-Buttons läuft bei jedem Schließen, ein einziges Stück Aufräumarbeit deckt also alle Ausgänge ab.
Wird das Action Sheet auf dem Desktop zu einem Popover oder einem Dialog?
Nein. In seinem Stylesheet steht nicht ein einziger Breakpoint: Auf einem breiten Bildschirm bekommen Sie dasselbe Sheet, unten verankert, auf 34rem begrenzt und horizontal zentriert. Wenn Sie ein Menü wollen, das an dem Button hängt, der es geöffnet hat, ist dies die falsche Komponente. Zwei weitere Dinge, bevor Sie danach greifen: open() greift sofort auf document zu, es muss also im Browser laufen und nicht beim Server-Rendering, und das Sheet fängt zwar Tab ein, macht die Seite dahinter aber nicht inert, ein Screenreader kann also weiterhin dorthin abwandern.