Bileşenler
DropdownMenu
Bir butonun arkasındaki eylem listesi; seçim öğeleri, gruplar, alt menüler ve kısayollarla.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Öğe vurgulu (üzerine gelme ya da ok tuşu) | Zemin rengi belirir | color-action-subtle-hovered |
| Tehlikeli öğe | Kırmızı metin ve ikon; vurguda kırmızı zemin | color-text-danger, color-icon-danger, color-action-danger-subtle-hovered |
| Devre dışı öğe | Soluk metin, ikinci satırda neden | color-text-disabled |
| Seçili onay / radyo | Etiketin sonunda işaret ya da nokta büyüyerek belirir | color-icon-brand |
| Alt menü açık | Tetikleyici öğe vurgulu kalır | color-action-subtle-hovered |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Menü genişliği | 192–320 px | menu-min-width, menu-max-width |
| Öğe yüksekliği | En az 32 px | menu-item-height |
| Menü iç boşluğu | 4 px | space-xs |
| Öğe iç boşluğu | 8 px yatay | space-md |
| İkon | 16 px | icon-size-sm |
| Köşe yarıçapı | 10 px menü, 6 px öğe (menünün 4 px iç boşluğuyla eş merkezli) | menu-radius, menu-item-radius, menu-inset |
| Menü kenarı | 1 px kaplama çizgisi (yer kaplamaz), küçük gölge | color-border-overlay, shadow-popup |
Girintili öğe (inset) |
Etiket, ikonlu öğelerin etiketiyle aynı hizada: 32 px baş boşluğu | space-md, icon-size-sm |
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-menu-min-width | 192px192px192px | 192px192px192px | |
--bigbang-menu-max-width | 320px320px320px | 320px320px320px | |
--bigbang-menu-item-height | 32px32px32px | 32px32px32px | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #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-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-motion-popover-enter-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s | |
--bigbang-motion-popover-exit-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-hover-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-selection-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
Menü girişi ve çıkışı (motion.popover) |
opacity, scale 0.96 → 1 tetikleyiciden |
motion-popover-enter-duration, motion-popover-exit-duration |
motion-popover-enter-easing, motion-popover-exit-easing |
Yalnızca belirir ve söner. |
Öğe vurgusu (motion.hover) |
background-color |
motion-hover-duration |
motion-hover-easing |
Değişmez. |
Onay ve nokta (motion.selectionMark) |
opacity, scale %60 → %100 |
motion-selection-duration |
motion-selection-easing |
Ölçek 1; yalnızca belirir. |
Değerler için Hareket sayfasına bakın.