Tipografi

text(), bir metin parçasını kitaplığın boyutlarından birinde işler. Türev, makul bir öğe seçer — variant: 'h2' gerçek bir <h2> işler — böylece başlıklar kimsenin düşünmesine gerek kalmadan belge ana hattına iner.

Türevler

Başlık 1

Başlık 2

Başlık 3

Başlık 4

Başlık 5

Başlık 6

Lead — gövde metninden bir adım yukarısı, bir başlığın altındaki cümle için.

Body — varsayılan.

Small — hâlâ cümle olan altyazılar.

Caption — küçük yazı.Overline

stack({ gap: 'sm' },
  text({ variant: 'h1' }, 'Başlık 1'),
  text({ variant: 'h2' }, 'Başlık 2'),
  text({ variant: 'h3' }, 'Başlık 3'),
  text({ variant: 'h4' }, 'Başlık 4'),
  text({ variant: 'h5' }, 'Başlık 5'),
  text({ variant: 'h6' }, 'Başlık 6'),
  text({ variant: 'lead' }, 'Lead — gövde metninden bir adım yukarısı, bir başlığın altındaki cümle için.'),
  text({ variant: 'body' }, 'Body — varsayılan.'),
  text({ variant: 'small' }, 'Small — hâlâ cümle olan altyazılar.'),
  text({ variant: 'caption' }, 'Caption — küçük yazı.'),
  text({ variant: 'overline' }, 'Overline'),
)

Başlıklar

heading() bir ana hat level değeri alır ve kendini ona göre boyutlandırır. size ikisini ayırır: h3 gibi görünen bir <h1> bir ekran okuyucu için hâlâ h1’dir.

Eşleşecek biçimde boyutlanmış 2. düzey bir başlık

h5 gibi boyutlanmış 2. düzey bir başlık

stack({ gap: 'sm' },
  heading({ level: 2 }, 'Eşleşecek biçimde boyutlanmış 2. düzey bir başlık'),
  heading({ level: 2, size: 'h5' }, 'h5 gibi boyutlanmış 2. düzey bir başlık'),
)

Ton

Tam karşıtlıktan okunabilir en sessiz griye kadar üç vurgu ağırlığı.

Varsayılan — gövde metninin dizildiği renk.

Soluk — ikincil metin, hâlâ rahatça okunur.

Sessiz — etiketler ve üst veri.

stack({ gap: 'xs' },
  text('Varsayılan — gövde metninin dizildiği renk.'),
  text({ tone: 'muted' }, 'Soluk — ikincil metin, hâlâ rahatça okunur.'),
  text({ tone: 'subtle' }, 'Sessiz — etiketler ve üst veri.'),
)

Hizalama

Baş

Orta

Son

stack({ gap: 'xs' },
  text({ align: 'start' }, 'Baş'),
  text({ align: 'center' }, 'Orta'),
  text({ align: 'end' }, 'Son'),
)

Kesme ve sınırlama

truncate tek bir satırı üç noktayla keser. lines ise belirli sayıda satıra sınırlar; bir kart özetinin genellikle istediği budur.

Kabının genişliğinin çok ötesine giden ve sarmak yerine üç noktayla kesilen tek bir satır.

İki satıra sınırlanmış. Bu paragraf, sınırlamanın gerçekten kesebileceği bir şey olsun diye bir süre sürüyor ve sonra üçüncü satırın başlayacağı noktanın ötesine biraz daha gidiyor.

stack({ gap: 'md' },
  card({ variant: 'flat' }, cardBody(
    text({ truncate: true }, 'Kabının genişliğinin çok ötesine giden ve sarmak yerine üç noktayla kesilen tek bir satır.'),
  )),
  card({ variant: 'flat' }, cardBody(
    text({ lines: 2, tone: 'muted' }, 'İki satıra sınırlanmış. Bu paragraf, sınırlamanın gerçekten kesebileceği bir şey olsun diye bir süre sürüyor ve sonra üçüncü satırın başlayacağı noktanın ötesine biraz daha gidiyor.'),
  )),
)

Satır içi kod ve tuşlar

sitelo build çalıştırın ya da aramak için ⌘ K tuşlarına basın.

text(
  code('sitelo build'), ' çalıştırın ya da aramak için ', kbd('⌘'), ' ', kbd('K'), ' tuşlarına basın.',
)

Çocuklar HTML olarak işlenir — bu kitaplıkta yuvalamayı her yerde işler kılan şey budur ve code() de bir istisna değildir. Yani etiket içeren bir örneğin, onları kaçıran text propuna ihtiyacı vardır:

<em>Merhaba</em> — text: yazıldığı gibi gösterilir

Merhaba — çocuklar: biçimlendirme olarak ayrıştırılır

stack({ gap: 'sm' },
  text(code({ text: '<em>Merhaba</em>' }), ' — text: yazıldığı gibi gösterilir'),
  text(code('<em>Merhaba</em>'), ' — çocuklar: biçimlendirme olarak ayrıştırılır'),
)

İkisi de işe yarar. text, bir etiketin kurulmak yerine okunması gereken bir kod örneği içindir. Çocuklar ise, biçimlendirmenin kendisinin önemli olduğu, zaten sözdizimi vurgulanmış çıktı içindir — bir Prism ya da Shiki sonucu doğrudan içine girer.

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

Birleştirme

Metin yalnızca bir dize değil çocuk da alır — böylece bağlantılar, kod ve vurgu, HTML’de olacağı gibi içine yuvalanır.

Sayfalar HTML döndüren fonksiyonlardır. sayfa yazmak rehberine bakın.

text({ variant: 'lead' },
  'Sayfalar ',
  code('HTML'),
  ' döndüren fonksiyonlardır. ',
  link({ href: '/docs/pages' }, 'sayfa yazmak'),
  ' rehberine bakın.',
)

Öğeyi değiştirmek

as, görünüşü değiştirmeden öğeyi geçersiz kılar — ana hatta görünmemesi gereken görsel bir başlık ya da bir metin satırının içindeki bir <span> için.

Başlık gibi görünüyor, bir div

Bir paragrafta altyazı biçimlendirmesi

stack({ gap: 'xs' },
  text({ variant: 'h4', as: 'div' }, 'Başlık gibi görünüyor, bir div'),
  text({ variant: 'caption', as: 'p' }, 'Bir paragrafta altyazı biçimlendirmesi'),
)

Görsel olarak gizli

visuallyHidden() içeriği erişilebilirlik ağacında tutar ama ekrandan uzakta — gören okurların bağlamdan aldığı, bir ekran okuyucununsa ihtiyaç duyduğu etiket.

Derleme durumu: geçiyor — son derleme 4 dakika önce başarılı oldu

text(
  'Derleme durumu: ',
  chip({ color: 'success', dot: true }, 'geçiyor'),
  visuallyHidden(' — son derleme 4 dakika önce başarılı oldu'),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`variant`	`'h1'…'h6' \| 'lead' \| 'body' \| 'small' \| 'caption' \| 'overline'`	`'body'`	Boyut, ağırlık ve varsayılan öğe.
`tone`	`'default' \| 'muted' \| 'subtle'`	`'default'`	Metnin taşıdığı karşıtlık.
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Metin hizalaması.
`truncate`	`boolean`	`false`	Tek satır, üç noktayla kesilmiş.
`lines`	`number`	—	Bu kadar satıra sınırlar.
`as`	`string`	—	Türevin seçeceği öğeyi geçersiz kılar.

heading() şunu alır: level (1–6) ve isteğe bağlı bir size; geri kalan her şey aynıdır.