TaskCard

Zadanie z dowolnego połączonego trackera, jak na liście zadań Agenta. Wybierz ją dla list, w których jedno zadanie otwiera się obok listy, i umieść przycisk startu w actions.

TaskCard

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: TaskCard

ST
SK-101To doUrgent
Skribly TrackerWeb app2 hours ago
ST
SK-102In progressHigh
Skribly TrackerWeb appyesterday
ST
SK-103In reviewMedium
Skribly TrackerWeb app2 days ago
ST
SK-104DoneLow
Skribly TrackerWeb applast week
GH
org/site#58Closed
Read-only task from an archived repository
GitHubarchived

Noc, podgląd: TaskCard

ST
SK-101To doUrgent
Skribly TrackerWeb app2 hours ago
ST
SK-102In progressHigh
Skribly TrackerWeb appyesterday
ST
SK-103In reviewMedium
Skribly TrackerWeb app2 days ago
ST
SK-104DoneLow
Skribly TrackerWeb applast week
GH
org/site#58Closed
Read-only task from an archived repository
GitHubarchived

Wysoki kontrast, podgląd: TaskCard

ST
SK-101To doUrgent
Skribly TrackerWeb app2 hours ago
ST
SK-102In progressHigh
Skribly TrackerWeb appyesterday
ST
SK-103In reviewMedium
Skribly TrackerWeb app2 days ago
ST
SK-104DoneLow
Skribly TrackerWeb applast week
GH
org/site#58Closed
Read-only task from an archived repository
GitHubarchived

UżycieLink do sekcji Użycie

tsx

import { TaskCard } from '@skribly/ui/tracker'

tsx

<TaskCard taskKey="SK-102" title={task.title} status={<Badge>{task.status}</Badge>}
  meta={[tracker.name, project.name, ago(task.updated)]} onPress={() => open(task)} isCurrent={open === task.key} />

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

Tytuł jest przyciskiem albo linkiem karty, a jego pole trafienia pokrywa kartę; akcje leżą nad nim i pozostają osiągalne osobno. isCurrent ustawia aria-current z linią w kolorze akcentu. isPending ustawia aria-busy i pokazuje wskaźnik z pendingLabel, a karty nie można otworzyć dwa razy.
Długie tytuły kończą się po dwóch liniach, z pełnym tytułem w dymku podpowiedzi i dla czytników ekranu.

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