Modal

Okno dialogowe, które blokuje stronę, dopóki nie zostanie zamknięte. Wybierz je dla krótkiego zadania, takiego jak formularz lub wybór, które trzeba skończyć, zanim pójdziesz dalej; treść się przewija, a akcje zostają w widoku.

Modal

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Modal

Noc, podgląd: Modal

Wysoki kontrast, podgląd: Modal

Zobacz w działaniuLink do sekcji Zobacz w działaniu

Fokus przechodzi do komponentu Modal, zostaje w nim i po naciśnięciu Escape wraca na przycisk.

UżycieLink do sekcji Użycie

tsx

import { Modal } from '@skribly/ui/overlays'

tsx

<Modal
  trigger={<Button>Rename project</Button>}
  title="Rename project"
  closeLabel="Close"
  footer={<><Button variant="outline" slot="close">Cancel</Button><Button onPress={save}>Save</Button></>}
>
  <TextField label="Project name" />
</Modal>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Fokus przechodzi do okna, Tab zostaje w środku, okno zamykają Escape i przycisk zamknięcia, a fokus wraca na element otwierający.
Tytuł nazywa okno, a opis je opisuje.
Reszta strony jest ukryta przed czytnikami ekranu, gdy okno jest otwarte.
Budowane z celem WCAG 2.2 AA.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.