Tipografi

text() merender sepotong teks pada salah satu ukuran milik pustaka ini. Variannya memilih elemen yang masuk akal — variant: 'h2' merender <h2> sungguhan — jadi judulnya mendarat di kerangka dokumen tanpa siapa pun perlu memikirkannya.

Varian

Judul 1

Judul 2

Judul 3

Judul 4

Judul 5

Judul 6

Lead — satu tingkat di atas teks badan, untuk kalimat di bawah sebuah judul.

Body — bawaannya.

Small — keterangan yang masih berupa kalimat.

Caption — cetakan kecilnya.Overline

stack({ gap: 'sm' },
  text({ variant: 'h1' }, 'Judul 1'),
  text({ variant: 'h2' }, 'Judul 2'),
  text({ variant: 'h3' }, 'Judul 3'),
  text({ variant: 'h4' }, 'Judul 4'),
  text({ variant: 'h5' }, 'Judul 5'),
  text({ variant: 'h6' }, 'Judul 6'),
  text({ variant: 'lead' }, 'Lead — satu tingkat di atas teks badan, untuk kalimat di bawah sebuah judul.'),
  text({ variant: 'body' }, 'Body — bawaannya.'),
  text({ variant: 'small' }, 'Small — keterangan yang masih berupa kalimat.'),
  text({ variant: 'caption' }, 'Caption — cetakan kecilnya.'),
  text({ variant: 'overline' }, 'Overline'),
)

Judul

heading() menerima level kerangka dan mengukur dirinya agar cocok. size memisahkan keduanya: sebuah <h1> yang tampak seperti h3 tetap h1 bagi pembaca layar.

Judul tingkat 2, diukur agar cocok

Judul tingkat 2, diukur seperti h5

stack({ gap: 'sm' },
  heading({ level: 2 }, 'Judul tingkat 2, diukur agar cocok'),
  heading({ level: 2, size: 'h5' }, 'Judul tingkat 2, diukur seperti h5'),
)

Nada

Tiga bobot penekanan, dari kontras penuh sampai kelabu paling tenang yang masih terbaca.

Bawaan — warna yang dipakai teks badan.

Redup — teks sekunder, masih nyaman dibaca.

Halus — label dan metadata.

stack({ gap: 'xs' },
  text('Bawaan — warna yang dipakai teks badan.'),
  text({ tone: 'muted' }, 'Redup — teks sekunder, masih nyaman dibaca.'),
  text({ tone: 'subtle' }, 'Halus — label dan metadata.'),
)

Perataan

Awal

Tengah

Akhir

stack({ gap: 'xs' },
  text({ align: 'start' }, 'Awal'),
  text({ align: 'center' }, 'Tengah'),
  text({ align: 'end' }, 'Akhir'),
)

Pemotongan dan pembatasan

truncate memotong satu baris dengan elipsis. lines justru membatasinya pada sejumlah baris, dan itulah yang biasanya diinginkan ringkasan kartu.

Satu baris yang terus berjalan jauh melewati lebar wadahnya lalu dipotong dengan elipsis alih-alih dibungkus ke baris berikutnya.

Dibatasi pada dua baris. Paragraf ini berjalan cukup lama agar ada sesuatu yang benar-benar bisa dipotong pembatasnya, lalu terus berjalan sedikit lebih jauh lagi, melewati titik tempat baris ketiga akan dimulai.

stack({ gap: 'md' },
  card({ variant: 'flat' }, cardBody(
    text({ truncate: true }, 'Satu baris yang terus berjalan jauh melewati lebar wadahnya lalu dipotong dengan elipsis alih-alih dibungkus ke baris berikutnya.'),
  )),
  card({ variant: 'flat' }, cardBody(
    text({ lines: 2, tone: 'muted' }, 'Dibatasi pada dua baris. Paragraf ini berjalan cukup lama agar ada sesuatu yang benar-benar bisa dipotong pembatasnya, lalu terus berjalan sedikit lebih jauh lagi, melewati titik tempat baris ketiga akan dimulai.'),
  )),
)

Kode sebaris dan tombol

Jalankan sitelo build atau tekan ⌘ K untuk mencari.

text(
  'Jalankan ', code('sitelo build'), ' atau tekan ', kbd('⌘'), ' ', kbd('K'), ' untuk mencari.',
)

Anak dirender sebagai HTML — itulah yang membuat penyarangan bekerja di mana pun di pustaka ini, dan code() bukan pengecualian. Jadi contoh yang berisi tag butuh props text, yang mengaburkannya:

<em>Halo</em> — text: ditampilkan apa adanya

Halo — anak: diurai sebagai markup

stack({ gap: 'sm' },
  text(code({ text: '<em>Halo</em>' }), ' — text: ditampilkan apa adanya'),
  text(code('<em>Halo</em>'), ' — anak: diurai sebagai markup'),
)

Keduanya berguna. text untuk contoh kode, ketika sebuah tag harus dibaca alih-alih dibangun. Anak untuk keluaran yang sudah diberi sorotan sintaks, ketika markup-nya itulah intinya — hasil Prism atau Shiki langsung masuk.

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')),
)

Menyusun

Teks menerima anak, bukan sekadar sebuah string — jadi tautan, kode, dan penekanan bersarang di dalamnya dengan cara yang sama seperti di HTML.

Halaman adalah fungsi yang mengembalikan HTML. Lihat panduan menulis halaman.

text({ variant: 'lead' },
  'Halaman adalah fungsi yang mengembalikan ',
  code('HTML'),
  '. Lihat panduan ',
  link({ href: '/docs/pages' }, 'menulis halaman'),
  '.',
)

Mengganti elemennya

as menimpa elemennya tanpa mengubah tampilannya — untuk judul visual yang tidak boleh muncul di kerangkanya, atau sebuah <span> di dalam satu baris teks.

Tampak seperti judul, tetapi sebuah div

Penataan keterangan pada sebuah paragraf

stack({ gap: 'xs' },
  text({ variant: 'h4', as: 'div' }, 'Tampak seperti judul, tetapi sebuah div'),
  text({ variant: 'caption', as: 'p' }, 'Penataan keterangan pada sebuah paragraf'),
)

Tersembunyi secara visual

visuallyHidden() menjaga konten tetap berada di pohon aksesibilitas tetapi di luar layar — label yang dibutuhkan pembaca layar di tempat pembaca awas memperolehnya dari konteks.

Status build: lulus — build terakhir berhasil 4 menit lalu

text(
  'Status build: ',
  chip({ color: 'success', dot: true }, 'lulus'),
  visuallyHidden(' — build terakhir berhasil 4 menit lalu'),
)

Props

Prop	Tipe	Bawaan	Deskripsi
`variant`	`'h1'…'h6' \| 'lead' \| 'body' \| 'small' \| 'caption' \| 'overline'`	`'body'`	Ukuran, bobot, dan elemen bawaannya.
`tone`	`'default' \| 'muted' \| 'subtle'`	`'default'`	Seberapa besar kontras yang dibawa teksnya.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Perataan teks.
`truncate`	`boolean`	`false`	Satu baris, dipotong dengan elipsis.
`lines`	`number`	—	Membatasi pada sebanyak ini baris.
`as`	`string`	—	Menimpa elemen yang akan dipilih variannya.

heading() menerima level (1–6) dan sebuah size opsional; selebihnya sama.