AttentionItem

Krótka lista tego, czego czytelnik potrzebuje dzisiaj: liczba, czego dotyczy, dlaczego i droga do celu. Pozycje blokujące oznacz jako urgent. Gdy lista jest pusta, przekaż pusty stan z następnym krokiem.

AttentionItem
AttentionList

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: AttentionItem

3DraftsWritten but not published.
1Tracker sync failedUrgentThe token expired yesterday.
12Comments waiting for a reply on pull requests across three repositories

Nothing needs you today.

Noc, podgląd: AttentionItem

3DraftsWritten but not published.
1Tracker sync failedUrgentThe token expired yesterday.
12Comments waiting for a reply on pull requests across three repositories

Nothing needs you today.

Wysoki kontrast, podgląd: AttentionItem

3DraftsWritten but not published.
1Tracker sync failedUrgentThe token expired yesterday.
12Comments waiting for a reply on pull requests across three repositories

Nothing needs you today.

UżycieLink do sekcji Użycie

tsx

import { AttentionItem, AttentionList } from '@skribly/ui/surfaces'

tsx

<AttentionList aria-label="Needs you">
  <AttentionItem count={3} label="Drafts" note="Waiting for review" href="/drafts" actionLabel="Review" />
  <AttentionItem count={1} label="Failed sync" urgent urgentLabel="Urgent" href="/sync" />
</AttentionList>

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

Każdy wiersz jest jednym linkiem nazwanym przez liczbę i etykietę i opisanym przez notatkę, więc lista linków nadal ma sens.
Celem jest cały wiersz, który pokazuje obwódkę fokusa.
Pilne wiersze dodają znak ostrzeżenia i słowo z urgentLabel, nigdy samą czerwień.
Podpowiedź akcji jest ukryta przed czytnikami ekranu.

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