Toasts

Krótkie komunikaty o wyniku akcji, pokazywane na brzegu ekranu. Wybierz toast dla wiadomości, które mogą minąć, takich jak „Saved”. Wyniki, które muszą zostać, należą do Alert. useToast() pokazuje toast z dowolnego miejsca pod providerem, a container renderuje stos wewnątrz panelu z motywem.

ToastProvider
ToastViewport
useToast

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Toasts

Noc, podgląd: Toasts

Wysoki kontrast, podgląd: Toasts

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

Komunikaty Toast w trzech tonach, każdy z ikoną i słowem, a nie tylko z kolorem.

UżycieLink do sekcji Użycie

tsx

import { ToastProvider, ToastViewport, useToast } from '@skribly/ui/feedback'

tsx

<ToastProvider>
  <App />
  <ToastViewport toneLabels={toneLabels} closeLabel="Close" regionLabel="Notifications" />
</ToastProvider>

const toast = useToast()
toast.success('Changes saved')
toast.error('Could not publish', { description: 'Try again in a minute.' })

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

Stos jest landmarkiem nazwanym przez regionLabel; F6 przenosi do niego fokus, a Tab przechodzi po toastach.
Każdy nowy toast jest odczytywany raz: sukces i informacja przez region na żywo typu polite, błędy przez region typu assertive.
Sukces i informacja zamykają się po 6 sekundach albo później, nigdy krócej niż po 5; ostrzeżenia, błędy i toasty z akcją zostają do zamknięcia.
Liczniki czasu są wstrzymane, gdy wskaźnik lub fokus jest na stosie.
Escape albo przycisk zamknięcia zamyka toast, a fokus wraca tam, gdzie był.
Na wąskich ekranach stos zajmuje całą szerokość.

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