Pattern
Sześć deseni marki narysowanych z bloków i kropek znaku: grid, dots (kropkowany margines), mosaic, ruled, hero i empty. Pierwsze pięć leży za treścią w kolorze produktu; empty to mały obrazek dla stanu braku danych. Wczytaj patterns.css, który dołączają plain.css i styles.css.
- Pattern
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
Noc, podgląd: Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
Wysoki kontrast, podgląd: Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
UżycieLink do sekcji Użycie
import { Pattern } from '@skribly/ui/brand'<Pattern pattern="grid" product="tracker" as="section" className="p-6">
<h2>Board</h2>
</Pattern>
<Pattern pattern="empty" product="agent" />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ść
- Tylko dekoracja: deseń jest pseudoelementem, więc nigdy nie jest odczytywany i nie przechwytuje kliknięć, a bez dzieci element jest ukryty przed technologiami asystującymi.
- Kolor deseniu utrzymuje kontrast tekstu głównego 4,5:1 (7:1 w wysokim kontraście) na każdej powierzchni strony, a wagę poniżej 3 procent.
- Nic się nie porusza, a tryb wysokiego kontrastu systemu Windows i druk pomijają deseń.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.