Kapsayıcı

Bir kapsayıcı içeriğini ortalar, metin satırları okunaklı kalsın diye genişliği sınırlar ve bir telefon ekranının kenarına hiçbir şey değmesin diye bir kenar boşluğu bırakır. Genellikle body() içindeki ilk şeydir.

Temel kapsayıcı

İçerideki her şey ortalanmış kalır ve boyut sınırında büyümeyi bırakır.

container(
  text({ variant: 'lead' }, 'İçerideki her şey ortalanmış kalır ve boyut sınırında büyümeyi bırakır.'),
)

Boyutlar

Tek bir okunaklı sütundan hiç sınır olmamasına kadar beş adım. sm yaklaşık 40rem’dir — kabaca düzyazının istediği genişlik.

sm — 40rem

md — 56rem

lg — 72rem (varsayılan)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (varsayılan)'),
  ),
)

Özel bir genişlik

width herhangi bir CSS uzunluğunu alır ve size değerini geçersiz kılar; ölçekte bulunmayan bir şeye ihtiyaç duyan tek bir sayfa için.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Kenar boşluğu

Kenar boşluğu, içerik ile görünüm kenarı arasında tutulan dolgudur. Bir boşluk belirteci, boşluk birimi sayısı ya da ham bir uzunluk alır.

Bir tablette içeriği kenara kadar gitmemesi gereken bir sayfa için daha geniş bir kenar boşluğu.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Bir tablette içeriği kenara kadar gitmemesi gereken bir sayfa için daha geniş bir kenar boşluğu.'),
)

Başka bir öğe olarak

as başka hiçbir şeyi değiştirmeden etiketi değiştirir — kapsayıcı aynı zamanda sayfanın <main> ya da bir <section> öğesiyken kullanışlıdır.

Bir main öğesi

Aynı yerleşim, doğru yer imi.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Bir main öğesi'),
  text({ tone: 'muted' }, 'Aynı yerleşim, doğru yer imi.'),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Hangi genişlik sınırının uygulanacağı.
`width`	`string`	—	size değerini geçersiz kılan ham bir max-width.
`gutter`	`Space`	`'md'`	Görünüm kenarına karşı tutulan satır içi dolgu.
`as`	`string`	`'div'`	İşlenecek öğe, örneğin main ya da section.