Bileşenler
Dialog
Sayfanın üzerinde açılan, bir görev ya da karar için odağı içinde tutan kalıcı pencere.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Kapalı | Görünmez | Yok |
| Açılıyor | Panel belirir, 8 px yükselir ve %96’dan büyür; arka plan koyulaşır | motion-dialog-enter-duration, motion-dialog-distance, motion-dialog-scale |
| Açık | Yükseltilmiş panel, 1 px kaplama çizgisi ve shadow-overlay gölgesi, hafif karartılmış ve 4 px bulanık arka plan |
color-surface-raised, color-border-overlay, shadow-overlay, color-surface-scrim, blur-surface-scrim |
| Kapanıyor | Panel küçülerek söner; arka plan açılır | motion-dialog-exit-duration |
| Alttan sayfa (< 640 px) | Tam genişlik, alt köşeler düz | dialog-radius |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Genişlik | 400 / 560 / 720 px | dialog-width-sm, dialog-width-md, dialog-width-lg |
| İç boşluk | 16 px | dialog-padding |
| Başlık, gövde ve eylem bandı arası | 16 px | space-xl |
| Başlık ile açıklama arası | 8 px | space-md |
| Görünüm kenarına uzaklık | 16 px | dialog-margin |
| Köşe yarıçapı | 14 px | dialog-radius |
| Başlık stili | title-sm (16 px, orta kalınlık, tek satır yüksekliği) |
text.title-sm |
| Gövde stili | body-md |
text.body-md |
| Eylem bandı | surface-layer-1 zemin, üstte 1 px çizgi, 16 px iç boşluk; 640 px altında eylemler alt alta ve tam genişlik (birincil üstte), üstünde sağa dayalı tek satır |
color-surface-layer-1, color-border-subtle, dialog-padding |
| Eylemler arası boşluk | 8 px | space-md |
| Kapat butonunun köşeye uzaklığı | 8 px | space-md |
xl 960 px genişliktir (dialog-width-xl), uzun incelemeler içindir. full, dialog-margin içinde ekranın tamamını kaplar.
Token’lar
Bölüm başlığı “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-dialog-width-sm | 400px400px400px | 400px400px400px | |
--bigbang-dialog-width-md | 560px560px560px | 560px560px560px | |
--bigbang-dialog-width-lg | 720px720px720px | 720px720px720px | |
--bigbang-dialog-radius | 14px14px14px | 14px14px14px | |
--bigbang-dialog-padding | 16px16px16px | 16px16px16px | |
--bigbang-dialog-margin | 16px16px16px | 16px16px16px | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-shadow-overlay | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-scrim | rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549) | rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549) | |
--bigbang-dialog-backdrop-blur | 4px4px4px | 4px4px4px | |
--bigbang-motion-dialog-enter-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s | |
--bigbang-motion-dialog-exit-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s | |
--bigbang-motion-dialog-enter-easing | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | |
--bigbang-motion-dialog-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-dialog-scale | 0.960.960.96 | 0.960.960.96 | |
--bigbang-motion-dialog-distance | 8px8px8px | 8px8px8px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
Panel girişi (motion.dialog) |
opacity, 8 px yükselme, scale 0.96 → 1 |
motion-dialog-enter-duration |
motion-dialog-enter-easing |
Ölçek 1, mesafe 0 olur; panel yalnızca belirir. |
| Panel çıkışı | opacity, scale 1 → 0.96 |
motion-dialog-exit-duration |
motion-dialog-exit-easing |
Yalnızca söner. |
Arka plan (motion.scrim) |
opacity |
Panelle aynı | Panelle aynı | Değişmez. |
| Eylem butonları | Basma ölçeği (motion.press) |
motion-press-duration |
motion-press-easing |
Ölçek 1 olur. |
Değerler için Hareket sayfasına bakın.