Şekil

Bir <figure>, altyazıyı betimlediği şeye bağlar; bir görselin altındaki paragraf bunu yapmaz. Yaygın durum için src geçirin ya da altyazılanmaya değer başka her şey için çocuk verin.

Temel şekil

figure({
  src: '/logo.svg',
  alt: 'sitelo sözcük işareti',
  caption: 'Üst çubukta göründüğü biçimiyle sözcük işareti.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Kopyala

Tutulan bir oranla

ratio görseli bir aspectRatio() içine sarar, böylece görsel yüklendiğinde altyazı sayfada aşağı zıplamaz.

grid({ min: '13rem' },
  figure({ src: '/logo.svg', alt: '', ratio: '16 / 9', caption: 'ratio: 16 / 9' }),
  figure({ src: '/logo.svg', alt: '', ratio: '1 / 1', caption: 'ratio: 1 / 1' }),
)

Kopyala

Başka bir şeyi altyazılamak

src olmadan, çocuklar şeklin içeriğidir.

figure({ caption: 'Tablo 1 — varsayılan bir derlemenin çıktısı.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Dosya' }, { key: 'size', header: 'Boyut', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Altyazılı kod

code() üzerindeki text propuna dikkat: bu kitaplıkta çocuklar her yerde HTML olarak işlenir, bu yüzden etiket içeren bir örneğin kaçırılması gerekir, yoksa tarayıcı onu göstermek yerine kurar.

figure({ caption: 'Bir sitelo sayfasının tamamı.' },
  code({ text: 'export default () => "<h1>Merhaba</h1>"' }),
)

Alt metni

alt özniteliği her zaman yazılır, hiçbir şey vermezseniz boş olarak — hiç alt taşımayan bir görsel dosya adıyla duyurulur, ki bu sessizlikten kötüdür. Altyazı bunun yerini tutmaz: altyazıyı herkes okur, alt ise görseli göremeyen birine betimler.

Altyazı zaten görselin söylediği her şeyi söylüyorsa doğru yanıt alt: '' değeridir.

Düzyazıda

Bir Markdown işleyicisinden çıkan şekilleri prose() zaten biçimlendirir. Bu bileşen, kendiniz kurduğunuz şekiller içindir.

Proplar