Container

İçeriği ortalar, genişliğini 1160px ile sınırlar ve responsive yan boşluğu (gutter) ekler. Her Section'ın içine bir tane koy; sayfa bantları kenardan kenara uzanırken içerikleri aynı hizada kalır.

KararlıKaynak kod

İçerik 1160px ile sınırlı, ortalı ve yan boşluklu

<Container>
<Box>İçerik 1160px ile sınırlı, ortalı ve yan boşluklu</Box>
</Container>

Import

tsx

import { Container } from "@merid/react";

Örnekler

Okuma genişliği

size="prose" içeriği 720px ile sınırlar; bu, uzun metinler için okuma genişliğidir.

Okuma genişliği: 720px

<Container size="prose">
<Box>Okuma genişliği: 720px</Box>
</Container>

Bir sayfa bandında

tsx

<Section tone="tray">
  <Container>
    <Heading level={2}>Fiyatlandırma</Heading>
  </Container>
</Section>

API referansı

as verilmedikçe bir div render'lar; ref'i iletir ve tüm HTML attribute'larını aktarır.

Prop	Tip	Varsayılan	Açıklama
`size`	`"default" \| "prose"`	`"default"`	Maksimum içerik genişliği: default 1160px, prose 720px.
`as`	`ElementType`	`"div"`	div yerine render'lanacak eleman ya da component, örneğin main.

Stil verme

Seçici	Değerler
`.mrd-container`	Kök eleman
`data-size`	`default` · `prose`

Component değişkeni: --mrd-container-width; değeri --mrd-container (1160px) ya da --mrd-prose (720px) olur.

css

.wide.mrd-container {
  --mrd-container-width: 1320px;
}

Erişilebilirlik

Container yalnızca layout içindir ve bir rol eklemez. En dıştaki sarmalayıcı olduğunda sayfanın ana landmark'ı için as="main" kullan.

Kullanım ilkeleri

Yap

Arka planı kenardan kenara uzanan Section'a, genişlik sınırını da onun içindeki Container'a ver.

Kaçın

Container'ları iç içe koymak ya da bir container'a arka plan rengi vermek. Renk viewport kenarlarına ulaşmadan biter.

İlgili sayfalar

Section: container'ı saran, kenardan kenara uzanan bant.
Grid ve Stack: container içindeki layout.