Box

Ne zaman kullanılır

Box, bir içeriğe token’lı dolgu, yüzey, kenarlık ya da köşe vermek içindir: kart, panel, çukur alan, bölge. Sayfa düzeninde bir kapsayıcı gerektiğinde ve değerleri el ile yazmak istemediğinizde kullanın.

Ne zaman kullanılmaz

• Öğeleri dizmek için: Dikey akış için Stack, yatay akış için Inline, sütunlar için Grid kullanın. Box yalnızca tek bir kutudur.
• Serbest stil için: Box className ve style almaz. Düzen için Stack, Inline ve Grid className alır; Box’ta her değer bir token’dır.
• Sayfa genişliğini sınırlamak için: İçeriği ortalayıp en geniş genişliği vermek için Container kullanın.

Anatomi

Box iki parçadan oluşur:

1. Kapsayıcı: tek bir <div> (ya da render ile verilen öğe). Dolgu, yüzey rengi, kenarlık ve köşe yarıçapı bu öğeye sınıf olarak yazılır.
2. İçerik: children. Box içeriğin yerleşimine karışmaz; çocuklar normal blok akışında durur.

Davranış

• Box durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Verilmeyen prop sınıf üretmez. Hiç prop verilmezse class özniteliği yazılmaz.
• paddingInline ve paddingBlock, padding’in aynı kenarlardaki değerini ezer; padding ile birlikte verilebilirler.
• background, border ve radius varsayılanı none’dır; Box kendiliğinden görünür bir yüzey çizmez.

Yönergeler

Dolguyu içeriğe göre seçin

Kenarlıklı bir Box’ta dolgu sıfır olursa metin kenarlığa yapışır.

Kart başlığı

YapınDolgu `lg`: metin kenarlıktan ayrı.

Kart başlığı

YapmayınDolgu `none`: metin kenarlığa yapışıyor.

Yüzeyi anlamına göre seçin

raised sayfanın üstüne çıkan karttır, sunken içine gömülen alandır. İkisini karıştırmayın.

Kart başlığı

YapınKart `raised`, kenarlığı `subtle`.

Kart başlığı

YapmayınKart `sunken`: içeri gömülü görünür ve öne çıkmaz.

İçerik

• Box kendi metnini taşımaz; içerik çocuklardan gelir.
• Bir bölge için render={<section aria-label="..." />} verirken sayfada başka yerde geçmeyen kısa bir ad yazın.
• Demo ve örnek metinleri nötr tutun: “Kart başlığı”, “Kart açıklaması burada yer alır.”

İlgili bileşenler

• Stack: Box içindeki öğeleri dikey dizmek için.
• Inline: Box içindeki öğeleri yatay dizmek için.
• Grid: Box’ları sütunlara yerleştirmek için.