Typografia

text() renderuje kawałek tekstu w jednym z rozmiarów biblioteki. Wariant dobiera sensowny element — variant: 'h2' renderuje prawdziwe <h2> — więc nagłówki trafiają do struktury dokumentu bez tego, żeby ktokolwiek o tym myślał.

Warianty

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5

Nagłówek 6

Lead — o stopień wyżej niż tekst główny, na zdanie pod tytułem.

Body — domyślny.

Small — podpisy, które wciąż są zdaniami.

Caption — drobny druk.Overline

stack({ gap: 'sm' },
  text({ variant: 'h1' }, 'Nagłówek 1'),
  text({ variant: 'h2' }, 'Nagłówek 2'),
  text({ variant: 'h3' }, 'Nagłówek 3'),
  text({ variant: 'h4' }, 'Nagłówek 4'),
  text({ variant: 'h5' }, 'Nagłówek 5'),
  text({ variant: 'h6' }, 'Nagłówek 6'),
  text({ variant: 'lead' }, 'Lead — o stopień wyżej niż tekst główny, na zdanie pod tytułem.'),
  text({ variant: 'body' }, 'Body — domyślny.'),
  text({ variant: 'small' }, 'Small — podpisy, które wciąż są zdaniami.'),
  text({ variant: 'caption' }, 'Caption — drobny druk.'),
  text({ variant: 'overline' }, 'Overline'),
)

Nagłówki

heading() przyjmuje level ze struktury i dobiera do niego rozmiar. size rozdziela te dwie rzeczy: <h1> wyglądające jak h3 wciąż jest dla czytnika ekranu h1.

Nagłówek poziomu 2, w dopasowanym rozmiarze

Nagłówek poziomu 2 w rozmiarze h5

stack({ gap: 'sm' },
  heading({ level: 2 }, 'Nagłówek poziomu 2, w dopasowanym rozmiarze'),
  heading({ level: 2, size: 'h5' }, 'Nagłówek poziomu 2 w rozmiarze h5'),
)

Ton

Trzy stopnie wyrazistości, od pełnego kontrastu po najcichszy czytelny szary.

Domyślny — kolor, w którym składany jest tekst główny.

Przygaszony — tekst drugorzędny, wciąż wygodnie czytelny.

Dyskretny — etykiety i metadane.

stack({ gap: 'xs' },
  text('Domyślny — kolor, w którym składany jest tekst główny.'),
  text({ tone: 'muted' }, 'Przygaszony — tekst drugorzędny, wciąż wygodnie czytelny.'),
  text({ tone: 'subtle' }, 'Dyskretny — etykiety i metadane.'),
)

Wyrównanie

Do początku

Do środka

Do końca

stack({ gap: 'xs' },
  text({ align: 'start' }, 'Do początku'),
  text({ align: 'center' }, 'Do środka'),
  text({ align: 'end' }, 'Do końca'),
)

Ucinanie i ograniczanie

truncate ucina pojedynczy wiersz wielokropkiem. lines ogranicza zamiast tego do liczby wierszy, czego zwykle chce streszczenie w karcie.

Pojedynczy wiersz, który ciągnie się daleko poza szerokość swojego kontenera i zostaje ucięty wielokropkiem, zamiast się zawinąć.

Ograniczone do dwóch wierszy. Ten akapit ciągnie się przez chwilę, żeby ograniczenie miało co uciąć, a potem leci jeszcze kawałek dalej, poza punkt, w którym zaczynałby się trzeci wiersz.

stack({ gap: 'md' },
  card({ variant: 'flat' }, cardBody(
    text({ truncate: true }, 'Pojedynczy wiersz, który ciągnie się daleko poza szerokość swojego kontenera i zostaje ucięty wielokropkiem, zamiast się zawinąć.'),
  )),
  card({ variant: 'flat' }, cardBody(
    text({ lines: 2, tone: 'muted' }, 'Ograniczone do dwóch wierszy. Ten akapit ciągnie się przez chwilę, żeby ograniczenie miało co uciąć, a potem leci jeszcze kawałek dalej, poza punkt, w którym zaczynałby się trzeci wiersz.'),
  )),
)

Kod liniowy i klawisze

Uruchom sitelo build albo naciśnij ⌘ K, żeby wyszukać.

text(
  'Uruchom ', code('sitelo build'), ' albo naciśnij ', kbd('⌘'), ' ', kbd('K'), ', żeby wyszukać.',
)

Dzieci renderują się jako HTML — to właśnie sprawia, że zagnieżdżanie działa wszędzie w tej bibliotece, a code() nie jest wyjątkiem. Próbka zawierająca znaczniki potrzebuje więc propsa text, który je ucieka:

<em>Cześć</em> — text: pokazane tak, jak napisane

Cześć — dzieci: interpretowane jako znaczniki

stack({ gap: 'sm' },
  text(code({ text: '<em>Cześć</em>' }), ' — text: pokazane tak, jak napisane'),
  text(code('<em>Cześć</em>'), ' — dzieci: interpretowane jako znaczniki'),
)

Oba się przydają. text jest do próbki kodu, gdzie znacznik ma być przeczytany, a nie zbudowany. Dzieci są do wyniku już podświetlonego składniowo, gdzie znaczniki są sednem — rezultat z Prisma albo Shiki wchodzi wprost.

sitelo build --root docs

sitelo build

stack({ gap: 'sm' },
  text(code({ text: 'sitelo build --root docs' })),
  text(code('<span style="color: var(--su-primary-soft-fg)">sitelo</span> build')),
)

Składanie

Text przyjmuje dzieci, a nie tylko ciąg znaków — więc odnośniki, kod i wyróżnienia zagnieżdżają się w nim tak samo jak w HTML-u.

Strony to funkcje zwracające HTML. Zobacz przewodnik pisanie stron.

text({ variant: 'lead' },
  'Strony to funkcje zwracające ',
  code('HTML'),
  '. Zobacz przewodnik ',
  link({ href: '/docs/pages' }, 'pisanie stron'),
  '.',
)

Zmiana elementu

as nadpisuje element bez zmiany wyglądu — dla wizualnego nagłówka, który nie ma pojawić się w strukturze, albo dla <span> wewnątrz wiersza tekstu.

Wygląda jak nagłówek, jest divem

Styl caption na akapicie

stack({ gap: 'xs' },
  text({ variant: 'h4', as: 'div' }, 'Wygląda jak nagłówek, jest divem'),
  text({ variant: 'caption', as: 'p' }, 'Styl caption na akapicie'),
)

Ukryte wizualnie

visuallyHidden() trzyma treść w drzewie dostępności, ale poza ekranem — etykieta, której potrzebuje czytnik ekranu tam, gdzie widzący wynoszą ją z kontekstu.

Status buildu: zaliczony — ostatni build powiódł się 4 minuty temu

text(
  'Status buildu: ',
  chip({ color: 'success', dot: true }, 'zaliczony'),
  visuallyHidden(' — ostatni build powiódł się 4 minuty temu'),
)

Propsy

Prop	Typ	Domyślnie	Opis
`variant`	`'h1'…'h6' \| 'lead' \| 'body' \| 'small' \| 'caption' \| 'overline'`	`'body'`	Rozmiar, grubość i domyślny element.
`tone`	`'default' \| 'muted' \| 'subtle'`	`'default'`	Ile kontrastu niesie tekst.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Wyrównanie tekstu.
`truncate`	`boolean`	`false`	Jeden wiersz, ucięty wielokropkiem.
`lines`	`number`	—	Ogranicz do tylu wierszy.
`as`	`string`	—	Nadpisz element, który wybrałby wariant.

heading() przyjmuje level (1–6) i opcjonalny size; reszta jest taka sama.