Drawer

Durumlar

Durum	Görsel değişiklik	Token’lar
Açılıyor	Panel kenardan tüm genişliği kadar kayar ve belirir	motion-drawer-enter-duration, motion-drawer-distance
Açık	Yükseltilmiş panel, 1 px kaplama çizgisi ve shadow-panel gölgesi; serbest köşeler yuvarlak, ekrana yaslanan kenar düz; hafif karartılmış ve 4 px bulanık arka plan	color-surface-raised, color-border-overlay, shadow-panel, color-surface-scrim, blur-surface-scrim
İç içe	Arkadaki çekmece her iç çekmece için %5 küçülür, 16 px görünür ve hafifçe koyulaşır	drawer-stack-step, drawer-stack-peek
Kaydırılıyor	Panel parmağı izler, arka plan açılır, geçiş durur	Yok
Kapanıyor	Panel kenara kayarak çıkar	motion-drawer-exit-duration, motion-drawer-exit-easing
Alt sayfa	Tam genişlik, üst köşeler yuvarlak, başlık 768 px altında ortada; tutamaç tutunma noktaları (snaps) varken varsayılan olarak, ya da handle ile	drawer-handle-width, drawer-handle-height
Durma noktaları (snapPoints)	Alt sayfa verilen yüksekliklerde durur; arka plan en az yarı opaklıkta kalır	Yok

Ölçüler

Özellik	Değer	Token
Genişlik (end)	360 / 480 / 640 px	drawer-width-sm, drawer-width-md, drawer-width-lg
Alt ve üst sayfa en fazla yükseklik	sm 320 px, md 560 px, lg görünüm − 96 px	drawer-sheet-height-sm, drawer-sheet-height-md, drawer-sheet-offset
İç boşluk	16 px, 640 px ve üstünde 24 px	dialog-padding-sm, dialog-padding-md
Başlık ile açıklama arası	2 px	space-xxs
Başlık stili	label-lg (16 px, orta kalınlık)	text.label-lg
Eylemler	Alt alta, tam genişlik, 8 px ara, çizgisiz	space-md
Köşe yarıçapı	Yan panelin iç köşeleri, alt sayfanın üst ve üst sayfanın alt köşeleri 14 px; ekrana yaslanan kenar 0	radius-xl
Tutamaç (handle)	96 × 4 px, surface-layer-2	drawer-handle-width, drawer-handle-height, color-surface-layer-2

start paneli end panelin aynasıdır: aynı genişlikler, aynı ince kaplama çizgisi ve shadow-panel gölgesi, iç köşeleri 14 px. top sayfa alt sayfanın aynasıdır: ekran genişliğindedir, içeriğiyle sm boyda en çok 320 px, md boyda 560 px yüksekliğe büyür (drawer-sheet-height-sm, drawer-sheet-height-md); lg ekran − 96 px’e kadar uzar (drawer-sheet-offset). Alt köşeleri 14 px yuvarlaktır.

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-drawer-width-sm		360px360px360px	360px360px360px
--bigbang-drawer-width-md		480px480px480px	480px480px480px
--bigbang-drawer-width-lg		640px640px640px	640px640px640px
--bigbang-drawer-handle-width		96px96px96px	96px96px96px
--bigbang-drawer-handle-height		4px4px4px	4px4px4px
--bigbang-drawer-sheet-offset		96px96px96px	96px96px96px
--bigbang-drawer-sheet-height-sm		320px320px320px	320px320px320px
--bigbang-drawer-sheet-height-md		560px560px560px	560px560px560px
--bigbang-drawer-stack-peek		16px16px16px	16px16px16px
--bigbang-drawer-stack-step		0.050.050.05	0.050.050.05
--bigbang-dialog-padding-sm		16px16px16px	16px16px16px
--bigbang-dialog-padding-md		24px24px24px	24px24px24px
--bigbang-dialog-radius		14px14px14px	14px14px14px
--bigbang-dialog-backdrop-blur		4px4px4px	4px4px4px
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-scrim		rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)	rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)
--bigbang-color-surface-layer-2		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-shadow-panel		0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)0px 10px 15px -3px rgba(0, 0, 0, 0.10196078431372549), 0px 4px 6px -4px rgba(0, 0, 0, 0.10196078431372549)	0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)0px 10px 15px -3px rgba(0, 0, 0, 0.3215686274509804), 0px 4px 6px -4px rgba(0, 0, 0, 0.3215686274509804)
--bigbang-motion-drawer-enter-duration		0.4s0.4s0.4s	0.4s0.4s0.4s
--bigbang-motion-drawer-exit-duration		0.24s0.24s0.24s	0.24s0.24s0.24s
--bigbang-motion-drawer-exit-easing		cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)	cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)
--bigbang-motion-drawer-distance		100%100%100%	100%100%100%

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Uç panel girişi (motion.drawer)	translate %100 → 0 (yazı yönüne göre), opacity	motion-drawer-enter-duration	easing-spring-productive-slow	Mesafe 0 olur; panel yalnızca belirir.
Alt sayfa girişi (motion.sheet)	Dikey translate %100 → 0, opacity	motion-drawer-enter-duration	easing-spring-productive-slow	Yalnızca belirir.
Çıkış	Kenara kayma, opacity; hızlı bir kaydırmadan sonra süre kaydırma gücüyle (--drawer-swipe-strength) kısalır; güç 0,5 ile 1 arasında sınırlanır, böylece çıkış en az yarı süre sürer	motion-drawer-exit-duration × kaydırma gücü	motion-drawer-exit-easing	Yalnızca söner.
İç içe çekmece	Arkadaki panelde scale ve translate	motion-drawer-enter-duration	easing-spring-productive-slow	Değişmez.
Kaydırma	Panel parmağı izler (--drawer-swipe-movement-*), arka plan açılır	Geçiş yok	Yok	Değişmez; doğrudan kullanıcı hareketidir.

Değerler için Hareket sayfasına bakın.