Section

Cömert dikey boşluğu olan, tam genişlikte bir sayfa bandı. Sayfanın bölgelerini kenarlıkla değil yüzeyle ayırmak için default ve tray section'ları sırayla kullan.

KararlıKaynak kod

Fiyatlandırma

Tek paket, aylık faturalandırılır.

<Section tone="tray" spacing="compact">
<Container>
  <Heading level={2} size="h3">Fiyatlandırma</Heading>
  <Text tone="muted">Tek paket, aylık faturalandırılır.</Text>
</Container>
</Section>

Import

tsx

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

Örnekler

Tonlar

default sayfa arka planını kullanır; tray ise geride duran alternatif bant için --mrd-tray kullanır. Uzun bir sayfa, ayraç kullanmadan bu ikisini sırayla dizerek yapı kazanır.

default tonu: sayfa arka planı.

tray tonu: geride duran alternatif bant.

<Section spacing="compact">
<Container><Text>default tonu: sayfa arka planı.</Text></Container>
</Section>
<Section tone="tray" spacing="compact">
<Container><Text>tray tonu: geride duran alternatif bant.</Text></Container>
</Section>

default boşluk --mrd-section değeridir (112px; küçük ekranlarda 80px ve 64px'e iner). compact bunu yarıya indirir; none ise bandı yalnızca arka planı için kullandığında boşluğu tamamen kaldırır.

compact: --mrd-section değerinin yarısı

none: dikey boşluk yok

<Section tone="tray" spacing="compact">…</Section>
<Section spacing="none">…</Section>

Tray section üzerinde kartlar

tray bir kart, tray section üzerinde kaybolurdu. Bu yüzden Section tone="tray" içinde Merid tray kartları yüzey rengine çevirir. Yükseltilmiş görünmesi gereken kartlar için variant="elevated" kullan.

Elevated bir kart, tray section üzerinde yükseltilmiş bir yüzey gibi görünür.

<Section tone="tray">
<Container>
  <Card variant="elevated">…</Card>
</Container>
</Section>

API referansı

Section varsayılan olarak bir <section> render'lar, ref'ini iletir ve diğer HTML attribute'larını olduğu gibi geçirir.

Prop	Tip	Varsayılan	Açıklama
`tone`	`"default" \| "tray"`	`"default"`	Arka plan: sayfa arka planı ya da geride duran tray.
`spacing`	`"default" \| "compact" \| "none"`	`"default"`	Dikey boşluk: --mrd-section, yarısı ya da hiç.
`as`	`ElementType`	`"section"`	Yerine render'lanacak eleman ya da component.

Stil verme

Seçici	Değerler
`.mrd-section`	Kök eleman
`data-tone`	`default` · `tray`
`data-spacing`	`default` · `compact` · `none`

Boşluk global --mrd-section token'ından gelir; tek bir bandın ritmini değiştirmek için token'ı o elemanda ez.

css

.hero.mrd-section {
  --mrd-section: 160px;
}

Erişilebilirlik

Bir <section>, yalnızca erişilebilir bir adı olduğunda landmark olarak sunulur. Önemli bantlara, başlıklarını gösteren bir aria-labelledby ver.
Yeni bir konu başlatmayan, tamamen görsel bantlar için as="div" kullan.

Kullanım ilkeleri

Yap

Sayfa bölgelerini ayırmak için default ve tray section'ları sırayla kullan.

Kaçın

İki tray section'ı arka arkaya dizmek ya da section'ların arasına kenarlık eklemek.

İlgili sayfalar

Container: section içindeki içeriğin genişliğini sınırlar.
Card: tray section'a uyum sağlayan yüzeyler.
Stack: section içindeki bloklar arası boşluk.