FlashMessages

Komunikaty, które serwer zostawił dla następnej strony, takie jak „Saved” po przekierowaniu albo błędy formularza. Wybierz je dla wyników renderowanych na serwerze; dla wyników akcji w przeglądarce użyj useToast.

FlashMessages

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: FlashMessages

Success: Profile saved

Noc, podgląd: FlashMessages

Success: Profile saved

Wysoki kontrast, podgląd: FlashMessages

Success: Profile saved

UżycieLink do sekcji Użycie

tsx

import { FlashMessages } from '@skribly/ui/feedback'

tsx

<FlashMessages
  messages={[{ id: 'saved', tone: 'ok', title: 'Profile saved' }]}
  toneLabels={{ ok: 'Success', info: 'Information', warn: 'Warning', danger: 'Error' }}
  onDismiss={remove}
  dismissLabel="Close message"
  focusError
/>

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

Komunikaty, które są już na stronie w chwili jej załadowania, nie są odczytywane przez regiony na żywo, więc każdy jest też wpisywany do regionu typu polite po zamontowaniu, a błędy do regionu typu assertive. focusError przenosi fokus na pierwszy błąd, co pasuje do formularza, który wrócił z serwera.
Każdy komunikat jest odczytywany raz i nigdy nie zamyka się sam.

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