tuix-modal

Ein zentrierter Dialog über abgedunkelter Seite, mit Slots für Titel, Body und Aktionen.

Das Modal legt sich über den Viewport und zentriert eine Karte aus tuix-paper. Es bleibt versteckt, bis visible gesetzt ist.

Delete this template?

The template and its renders will be removed. This cannot be undone.

Komponenten werden geladen…

Geschlossen wird es über das Icon in der Kopfzeile oder über einen der beiden Aktions-Buttons. Diese sind in der Demo verdrahtet, denn von selbst schliesst sich das Modal nur über sein eigenes Icon.

<tuix-modal visible>
    <tuix-text slot="title" size="xs">Diese Vorlage löschen?</tuix-text>
    <tuix-text slot="body"
        >Die Vorlage und ihre Renderings werden entfernt. Das lässt sich nicht rückgängig machen.</tuix-text
    >
    <div slot="actions" style="display: flex; gap: 8px">
        <tuix-button variant="secondary">Abbrechen</tuix-button>
        <tuix-button variant="primary">Löschen</tuix-button>
    </div>
</tuix-modal>

modal.addEventListener('on-close', () => setOpen(false))

Scrollbarer Body

Mit scrollable scrollt ein langer Body innerhalb der Karte, statt sie über den Viewport hinaus wachsen zu lassen.

<tuix-modal visible scrollable>
    <tuix-text slot="title" size="xs">AGB</tuix-text>
    <div slot="body">…ein sehr langer Text…</div>
</tuix-modal>

API

Properties

Property	Attribut	Typ	Standard	Beschreibung
`visible`	`visible`	`boolean`	`false`	Zeigt das Modal. Gespiegelt, CSS kann also `[visible]` ansprechen
`scrollable`	`scrollable`	`boolean`	`false`	Lässt den Body scrollen, statt die Karte wachsen zu lassen
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Events

Event	Detail	Wann
`on-close`	Keine	Das Schliessen-Icon wird geklickt

Die Komponente setzt visible = false selbst, bevor sie feuert; ein kontrollierendes Elternteil muss das in seinem eigenen Zustand nachziehen, sonst läuft das nächste Öffnen ins Leere.

Slots

Slot	Inhalt
`title`	Die Kopfzeile, neben dem Schliessen-Icon
`body`	Der Inhalt
`actions`	Die Fusszeile. Nur gepolstert: sie ordnet den Inhalt nicht an

Hinweise

Das Host-Element ist position: fixed, setzt aber keinen z-index: es stapelt sich nach Dokumentreihenfolge, ein weiter unten stehendes positioniertes Element kann sich also darüberlegen. Die Anwendung vergibt einen; die Demo oben nutzt genau deswegen z-index: 40, und tuix-toast bringt 99 mit.
dark erreicht die Karte und das Schliess-Icon, die das Modal selbst rendert, aber nicht Titel, Body und Actions, die hineingeslottet werden: die bringen ihr eigenes dark mit.
Der actions-Slot bringt nur Innenabstand mit und sonst nichts; zwei direkt hineingeslottete Buttons stehen also so, wie der Fluss der Seite sie setzt. Ein eigenes div darum herum bekommt das Zeilen-Layout, so wie im Beispiel oben.
Der abgedunkelte Hintergrund gehört zum Host und schliesst das Modal nicht; die Anwendung ergänzt das, wenn das Design es verlangt.
Nichts fängt den Fokus ein und nichts blockiert das Scrollen der Seite; wo das zählt, kümmert sich die Anwendung darum, solange das Modal offen ist.
Die Karte ist auf 96% des Viewports begrenzt und wird unter 640px vollbreit.