Gambar

Sebuah <figure> mengikat keterangan pada apa yang dijelaskannya, dan itu tidak dilakukan paragraf di bawah gambar. Berikan src untuk kasus yang lazim, atau anak untuk apa pun yang layak diberi keterangan.

Gambar dasar

figure({
  src: '/logo.svg',
  alt: 'Logotipe sitelo',
  caption: 'Logotipe itu, sebagaimana tampak di bilah atas.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Salin

Dengan rasio yang ditahan

ratio membungkus gambarnya dalam aspectRatio(), jadi keterangannya tidak pernah melompat turun ketika gambarnya dimuat.

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

Salin

Memberi keterangan pada hal lain

Tanpa src, anaknya menjadi isi gambarnya.

figure({ caption: 'Tabel 1 — keluaran dari build bawaan.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Berkas' }, { key: 'size', header: 'Ukuran', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Kode dengan keterangan

Perhatikan props text pada code(): di pustaka ini anak dirender sebagai HTML di mana pun, jadi contoh yang berisi tag perlu dikaburkan atau peramban akan membangunnya alih-alih menampilkannya.

figure({ caption: 'Seluruh isi sebuah halaman sitelo.' },
  code({ text: 'export default () => "<h1>Halo</h1>"' }),
)

Teks alt

Atribut alt selalu ditulis, kosong bila Anda tidak memberi apa-apa — gambar tanpa alt sama sekali akan diumumkan lewat nama berkasnya, yang lebih buruk daripada diam. Keterangan bukan penggantinya: keterangan dibaca semua orang, sedangkan alt menjelaskan gambarnya kepada orang yang tidak bisa melihatnya.

Ketika keterangannya sudah mengatakan semua yang dikatakan gambarnya, alt: '' adalah jawaban yang benar.

Di dalam prosa

Gambar yang keluar dari perender Markdown sudah ditata oleh prose(). Komponen ini untuk gambar yang Anda bangun sendiri.

Props