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 30.08.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
SEO.LIBRARY.ACTION_SHEET.INTRO
Installieren
npm install ng-hub-ui-action-sheetSpringen zu
Ideal für
Über action-sheet
SEO.LIBRARY.ACTION_SHEET.OVERVIEW
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.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.