Box

Durumlar

Box etkileşimli değildir. Varsayılan olarak bir <div> üretir; fare, klavye ya da dokunma ile durumu değişmez.

Durum	Destek	Görsel değişiklik
Varsayılan	Var	padding, background, border ve radius değerlerine göre dolgu, yüzey, kenarlık ve köşe
Üzerine gelme	Yok	Yok; öğe işaretçiye tepki vermez
Basılı	Yok	Yok; öğe tıklanamaz
Odak	Yok	Yok; öğe odak almaz ve odak halkası çizmez
Devre dışı	Yok	Yok; devre dışı olacak bir eylemi yok
Seçili	Yok	Yok; seçilebilir değil

Ölçüler

Box’ın kendi sabit ölçüsü yoktur; boyutu içeriğinden ve verilen token’lardan gelir.

Özellik	Değer	Token
Dolgu (padding, paddingInline, paddingBlock)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px	space-{ad}
Köşe yarıçapı	none 0, sm 6, md 8, lg 16 px	radius-sm, radius-md, radius-lg
Kenarlık kalınlığı	1 px; yalnızca border verildiğinde	border-width-default
Kenarlık rengi	default ya da subtle	color-border-default, color-border-subtle
Yüzey rengi	default, raised, sunken, layer-1, layer-2, layer-3	color-surface-{ad}

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-radius-sm		6px6px6px	6px6px6px
--bigbang-radius-md		8px8px8px	8px8px8px
--bigbang-radius-lg		10px10px10px	10px10px10px
--bigbang-border-width-default		1px1px1px	1px1px1px
--bigbang-color-surface-default		#f7f7f7#f7f7f7#f7f7f7	#1e1e1e#1e1e1e#1e1e1e
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-sunken		#f5f5f5#f5f5f5#f5f5f5	#171717#171717#171717
--bigbang-color-surface-layer-1		#f5f5f5#f5f5f5#f5f5f5	#262626#262626#262626
--bigbang-color-surface-layer-2		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-surface-layer-3		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-border-default		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Üzerine gelme, basma, odak	Yok: Box etkileşimli değildir	Azaltılacak bir şey yok
Giriş ve çıkış	Yok: Box süre ya da easing token’ı kullanmaz; içerik hemen gelir ve gider	Azaltılacak bir şey yok
Yerleşim değişimi	Yok: ekran genişliği değişince yerleşim geçişsiz değişir	Azaltılacak bir şey yok

Box bir hareket hazır ayarı (preset) kullanmaz; çocuklarının hareketi kendi bileşenlerine aittir. Ayrıntılar için Hareket sayfasına bakın.