Karta

Karta grupuje powiązaną treść na własnej powierzchni. Części — cardHeader(), cardMedia(), cardBody(), cardFooter() — są osobnymi funkcjami, a nie propsami, więc używasz tylko tych, których potrzebujesz, i układasz je w kolejności, jakiej chce projekt.

Podstawowa karta

Routing oparty na plikach

src/about.ht.js → /about

Katalogi stają się ścieżkami. Nawiasy stają się parametrami. Nie ma routera do skonfigurowania.

card(
  cardHeader({ title: 'Routing oparty na plikach', subtitle: 'src/about.ht.js → /about' }),
  cardBody(text({ variant: 'small', tone: 'muted' }, 'Katalogi stają się ścieżkami. Nawiasy stają się parametrami. Nie ma routera do skonfigurowania.')),
)

Warianty

Outlined jest domyślny. Elevated zamienia obramowanie na cień, a flat zamiast jednego i drugiego barwi powierzchnię.

Outlined

Elevated

Flat

grid({ min: '13rem' },
  card({ variant: 'outlined' }, cardBody(text({ variant: 'small' }, 'Outlined'))),
  card({ variant: 'elevated' }, cardBody(text({ variant: 'small' }, 'Elevated'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Flat'))),
)

Ze stopką

divided dodaje włoskową linię nad stopką. Stopka jest spychana na dół, więc karty w rzędzie wyrównują swoje akcje, nawet gdy tekst nad nimi ma różną długość.

Podstawowa strona

Minimalny projekt plus konfiguracje wdrożenia.

Blog w Markdownie

Katalog plików .md renderowanych do statycznych stron, z kanałem RSS i bez żadnego JavaScriptu po stronie klienta.

grid({ min: '14rem' },
  card(
    cardHeader({ title: 'Podstawowa strona' }),
    cardBody(text({ variant: 'small', tone: 'muted' }, 'Minimalny projekt plus konfiguracje wdrożenia.')),
    cardFooter({ divided: true }, button({ size: 'sm', variant: 'soft' }, 'Otwórz')),
  ),
  card(
    cardHeader({ title: 'Blog w Markdownie' }),
    cardBody(text({ variant: 'small', tone: 'muted' }, 'Katalog plików .md renderowanych do statycznych stron, z kanałem RSS i bez żadnego JavaScriptu po stronie klienta.')),
    cardFooter({ divided: true }, button({ size: 'sm', variant: 'soft' }, 'Otwórz')),
  ),
)

Materiał

cardMedia() wypełnia górę karty w stałych proporcjach, więc rząd kart zostaje równy niezależnie od wymiarów zdjęć źródłowych.

Domyślne 16 / 9

ratio: 4 / 3

grid({ min: '13rem' },
  card(
    cardMedia({ src: '/logo.svg', alt: '', style: 'background: var(--su-surface-2); object-fit: contain; padding: 1rem' }),
    cardBody(text({ variant: 'small' }, 'Domyślne 16 / 9')),
  ),
  card(
    cardMedia({ src: '/logo.svg', alt: '', ratio: '4 / 3', style: 'background: var(--su-surface-2); object-fit: contain; padding: 1rem' }),
    cardBody(text({ variant: 'small' }, 'ratio: 4 / 3')),
  ),
)

Cała karta jako odnośnik

Daj karcie href, a cała powierzchnia staje się jednym odnośnikiem, z towarzyszącym uniesieniem po najechaniu. W tej postaci nie wkładaj do karty przycisków ani innych odnośników — treść interaktywna nie może zagnieżdżać się w odnośniku. Zamiast tego użyj przycisku w stopce zwykłej karty.

Routing

Przeczytaj przewodnik

Trasy dynamiczne, catch-all i grupy tras.

Wczytywanie danych

Przeczytaj przewodnik

data() działa podczas buildu, z buforowaniem pobrań.

grid({ min: '14rem' },
  card({ href: '/docs/routing' },
    cardHeader({ title: 'Routing', subtitle: 'Przeczytaj przewodnik' }),
    cardBody(text({ variant: 'small', tone: 'muted' }, 'Trasy dynamiczne, catch-all i grupy tras.')),
  ),
  card({ href: '/docs/data' },
    cardHeader({ title: 'Wczytywanie danych', subtitle: 'Przeczytaj przewodnik' }),
    cardBody(text({ variant: 'small', tone: 'muted' }, 'data() działa podczas buildu, z buforowaniem pobrań.')),
  ),
)

Odstęp wewnętrzny

Jeden props ustawia odstęp wewnętrzny dla każdej części karty naraz.

padding: sm

padding: xl

stack({ gap: 'md' },
  card({ padding: 'sm' }, cardBody(text({ variant: 'small' }, 'padding: sm'))),
  card({ padding: 'xl' }, cardBody(text({ variant: 'small' }, 'padding: xl'))),
)

Dowolna zawartość

Części to udogodnienie, nie wymóg — karta przyjmuje dowolne dzieci, a cardHeader() przyjmuje własne dzieci obok tytułu, na awatar albo przycisk menu po prawej.

Paul Browne

Wdrożył 4 minuty temu

Build zaliczony12 stron4,1 kB

card(
  cardHeader(
    { title: 'Paul Browne', subtitle: 'Wdrożył 4 minuty temu' },
    avatar({ name: 'Paul Browne', size: 'sm' }),
  ),
  cardBody(
    stack({ direction: 'row', gap: 'sm', wrap: true },
      chip({ color: 'success', dot: true }, 'Build zaliczony'),
      chip({ color: 'neutral' }, '12 stron'),
      chip({ color: 'neutral' }, '4,1 kB'),
    ),
  ),
)

Propsy

card():

Prop	Typ	Domyślnie	Opis
`variant`	`'outlined' \| 'elevated' \| 'flat'`	`'outlined'`	Jak powierzchnia jest oddzielona od strony.
`href`	`string`	—	Renderuje całą kartę jako odnośnik.
`padding`	`Space`	`'lg'`	Odstęp wewnętrzny używany przez każdą część karty.

Części:

Część	Propsy	Domyślnie	Opis
`cardHeader`	`title, subtitle`	—	Tytuł i podtytuł, plus dowolne dzieci obok nich.
`cardTitle`	`as`	`'h3'`	Sam tytuł, gdy nagłówek budujesz ręcznie.
`cardSubtitle`		—	Przygaszony wiersz pod tytułem.
`cardMedia`	`src, alt, ratio`	`'16 / 9'`	Obraz nagłówkowy w stałych proporcjach.
`cardBody`		—	Główny obszar treści.
`cardFooter`	`divided`	`false`	Dolny rząd akcji; divided dodaje nad nim włoskową linię.