Alert
Komunikat wewnątrz treści, obok tego, czego dotyczy. Wybierz go dla wyniku, który zostaje na ekranie, takiego jak podsumowanie błędów na górze formularza; dla wiadomości, które mogą minąć, wybierz toast.
- Alert
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Alert
Information: Imports run at night
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
Noc, podgląd: Alert
Information: Imports run at night
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
Wysoki kontrast, podgląd: Alert
Information: Imports run at night
Success: Invitation sent
Warning: Two people are editing this page
Error: Fix 2 fields to send the form
- Email address is missing
- Project name is longer than 80 characters, which is the most a project name can hold
UżycieLink do sekcji Użycie
import { Alert } from '@skribly/ui/feedback'<Alert tone="danger" toneLabel={t('tone.error')} title="Fix 2 fields" headingLevel={2}>
<ul><li><a href="#email">Email address is missing</a></li></ul>
</Alert>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ść
- Statyczny alert jest grupą nazwaną przez słowo tonu i tytuł. live="polite" robi z niego status, a live="assertive" (albo urgent) alert, więc komunikat dodany po akcji jest odczytywany; najpierw wyrenderuj alert, potem go wypełnij. headingLevel umieszcza podsumowanie błędów w strukturze strony, a linki w nim mogą przenosić fokus do każdego pola.
- Przycisk zamknięcia ma cel co najmniej 24 px, a komunikat 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.