Dialog · Synatix Components

Demo

Ein Markup, drei Adapter, austauschbare Themes. Framework und Theme lassen sich frei kombinieren – die Komponente sieht immer gleich aus und verhält sich gleich. Der Code unter der Vorschau zeigt genau die gewählte Kombination.

Vanilla@synatix/vanilla + @synatix/theme-kredit

import { enhanceDialog } from "@synatix/vanilla";
import "@synatix/theme-kredit/theme.css";

// Ein Container im Markup trägt data-theme="kredit".
const root = document.querySelector(
  "[data-scope='dialog']"
);
const cleanup = enhanceDialog(root);

Vanilla@synatix/vanilla + @synatix/theme-cpool

import { enhanceDialog } from "@synatix/vanilla";
import "@synatix/theme-cpool/theme.css";

// Ein Container im Markup trägt data-theme="cpool".
const root = document.querySelector(
  "[data-scope='dialog']"
);
const cleanup = enhanceDialog(root);

Vanilla@synatix/vanilla

import { enhanceDialog } from "@synatix/vanilla";

const root = document.querySelector(
  "[data-scope='dialog']"
);
const cleanup = enhanceDialog(root);

React@synatix/react + @synatix/theme-kredit

import { Dialog } from "@synatix/react";
import "@synatix/theme-kredit/theme.css";

export function Example() {
  return (
    <div data-theme="kredit">
      <Dialog>
        <Dialog.Trigger>Öffnen</Dialog.Trigger>
        <Dialog.Content>
          <Dialog.Title>Bestätigen</Dialog.Title>
          <Dialog.Close>Schließen</Dialog.Close>
        </Dialog.Content>
      </Dialog>
    </div>
  );
}

React@synatix/react + @synatix/theme-cpool

import { Dialog } from "@synatix/react";
import "@synatix/theme-cpool/theme.css";

export function Example() {
  return (
    <div data-theme="cpool">
      <Dialog>
        <Dialog.Trigger>Öffnen</Dialog.Trigger>
        <Dialog.Content>
          <Dialog.Title>Bestätigen</Dialog.Title>
          <Dialog.Close>Schließen</Dialog.Close>
        </Dialog.Content>
      </Dialog>
    </div>
  );
}

React@synatix/react

import { Dialog } from "@synatix/react";

export function Example() {
  return (
    <Dialog>
      <Dialog.Trigger>Öffnen</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Bestätigen</Dialog.Title>
        <Dialog.Close>Schließen</Dialog.Close>
      </Dialog.Content>
    </Dialog>
  );
}

Svelte@synatix/svelte + @synatix/theme-kredit

<script>
  import { Dialog } from "@synatix/svelte";
  import "@synatix/theme-kredit/theme.css";
</script>

<div data-theme="kredit">
  <Dialog bind:open title="Bestätigen">Inhalt</Dialog>
</div>

Svelte@synatix/svelte + @synatix/theme-cpool

<script>
  import { Dialog } from "@synatix/svelte";
  import "@synatix/theme-cpool/theme.css";
</script>

<div data-theme="cpool">
  <Dialog bind:open title="Bestätigen">Inhalt</Dialog>
</div>

Svelte@synatix/svelte

<script>
  import { Dialog } from "@synatix/svelte";
</script>

<Dialog bind:open title="Bestätigen">Inhalt</Dialog>

Anatomie

Feste Parts dienen als Selektoren für CSS und Tests.

<div data-scope="dialog" data-part="root">
  <span data-part="trigger">…</span>
  <span data-part="backdrop">…</span>
  <span data-part="positioner">…</span>
  <span data-part="content">…</span>
  <span data-part="title">…</span>
  <span data-part="description">…</span>
  <span data-part="close">…</span>
</div>

Props

Prop	Typ	Standard	Beschreibung
`open`	`boolean`	`false`	Steuert den sichtbaren Zustand.
`modal`	`boolean`	`true`	Blockiert die Bedienung außerhalb des Dialogs.
`closeOnEscape`	`boolean`	`true`	Erlaubt das Schließen mit Escape.

Tastatur

Taste	Verhalten
`Enter / Leertaste`	Öffnet den Dialog über den Trigger.
`Tab`	Hält den Fokus innerhalb des Dialogs.
`Escape`	Schließt den Dialog und stellt den Fokus wieder her.

Demo

Änderung bestätigen

Anatomie

Props

Tastatur