Card
Obramowana powierzchnia dla jednego bloku treści. Użyj części nagłówka, treści i stopki dla panelu z tytułem i akcjami; użyj samej karty z wypełnieniem dla prostego pudełka.
- Card
- CardHeader
- CardTitle
- CardBody
- CardFooter
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Card
Projects
Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.
Noc, podgląd: Card
Projects
Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.
Wysoki kontrast, podgląd: Card
Projects
Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.
UżycieLink do sekcji Użycie
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@skribly/ui/surfaces'<Card as="section" padding="none">
<CardHeader actions={<Button size="sm" variant="outline">Add</Button>}>
<CardTitle icon={<FolderGit2 />}>Projects</CardTitle>
</CardHeader>
<CardBody>…</CardBody>
<CardFooter><Button variant="ghost">Open all</Button></CardFooter>
</Card>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ść
- Jako section, article lub aside karta staje się regionem nazwanym przez CardTitle.
- Poziom nagłówka dobierz do struktury strony przez level.
- Ikona tytułu jest ukryta przed czytnikami ekranu.
- Akcje nagłówka zawijają się pod tytuł na wąskich ekranach, a długie tytuły się łamią zamiast wychodzić poza kartę.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.