Bileşenler
ActionBar
Seçili öğeler için toplu eylemler; ilk seçimde belirir, kaç öğe seçildiğini söyler.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Gizli | count 0 iken çizilmez |
Yok |
Görünür (floating) |
Yükseltilmiş yüzey ve katman gölgesi | color-surface-raised, shadow-overlay |
Görünür (inline) |
Yükseltilmiş yüzey ve ince kenarlık, gölge yok | color-surface-raised, color-border-subtle |
| Düğme üzerine gelme | Hafif dolgu | color-action-subtle-hovered |
| Odak | 2 px dış odak halkası | color-focus-ring, border-width-focus |
Ölçüler
Bölüm başlığı “Ölçüler”Düğmeler 32 px yüksekliktedir (button-height-sm). Çubuğun iç boşluğu 4 px (space-xs), öğeler arası aralık 8 px (space-sm), köşe yarıçapı radius-lg’dir. floating çubuk ekranın altından 24 px (space-lg) yukarıdadır ve en fazla ekran genişliği eksi iki yanda 12 px olur.
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-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Çubuk belirir | opacity 0 → 1, 8 px aşağıdan yükselme (motion.toast) |
motion-toast-enter-duration |
motion-toast-enter-easing; kayma easing-spring-productive-base |
Kayma olmaz; çubuk yalnızca belirir. |
| Sayı değişir | opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Değişmez; saydamlık geçişidir. |
| Düğmeye basma | scale 1 → 0,97 |
motion-press-duration (70 ms) |
motion-press-easing |
Ölçek 1 kalır. |
Çubuk kaybolurken hemen kaldırılır; çıkış hareketi yoktur. Değerler için Hareket sayfasına bakın.