Popover

Mały panel przypięty do przycisku, dla dodatkowych kontrolek albo szczegółów, które nie potrzebują całego ekranu. Wybierz go zamiast Modal, gdy strona ma zostać w widoku.

Popover

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Popover

Noc, podgląd: Popover

Wysoki kontrast, podgląd: Popover

UżycieLink do sekcji Użycie

tsx

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

tsx

<Popover trigger={<Button>Share</Button>} title="Share this page">
  {(close) => <Button onPress={close}>Copy link</Button>}
</Popover>

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ść

Element otwierający zgłasza aria-expanded.
Panel jest oknem dialogowym nazwanym swoim tytułem albo przez label, gdy tytułu nie ma.
Fokus przechodzi do panelu i wraca na element otwierający po Escape albo kliknięciu poza panelem.
Panel nigdy nie jest szerszy niż ekran.

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