Ilustracja

<figure> wiąże podpis z tym, co opisuje, czego akapit pod obrazem nie robi. Podaj src dla typowego przypadku albo dzieci dla czegokolwiek innego, co warto podpisać.

Podstawowa ilustracja

figure({
  src: '/logo.svg',
  alt: 'Znak słowny sitelo',
  caption: 'Znak słowny, tak jak wygląda w górnym pasku.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Kopiuj

Z utrzymanymi proporcjami

ratio opakowuje obraz w aspectRatio(), więc podpis nigdy nie zeskakuje w dół strony, gdy obraz się załaduje.

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

Kopiuj

Podpisywanie czegoś innego

Bez src treścią ilustracji są dzieci.

figure({ caption: 'Tabela 1 — wynik domyślnego buildu.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Plik' }, { key: 'size', header: 'Rozmiar', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Kod z podpisem

Zwróć uwagę na props text w code(): w tej bibliotece dzieci renderują się wszędzie jako HTML, więc próbka zawierająca znaczniki wymaga ucieczki, inaczej przeglądarka ją zbuduje zamiast pokazać.

figure({ caption: 'Cała strona sitelo.' },
  code({ text: 'export default () => "<h1>Cześć</h1>"' }),
)

Tekst alternatywny

Atrybut alt jest zapisywany zawsze, pusty, jeśli nic nie podasz — obraz zupełnie bez alt jest odczytywany nazwą pliku, co jest gorsze niż cisza. Podpis go nie zastępuje: podpis czytają wszyscy, a alt opisuje obraz temu, kto go nie widzi.

Gdy podpis mówi już wszystko to, co obraz, alt: '' jest właściwą odpowiedzią.

W prozie

Ilustracje wychodzące z renderera Markdowna są już ostylowane przez prose(). Ten komponent jest do ilustracji, które budujesz sam.

Propsy