Bileşenler
SplitButton
Ana eylemi, ilgili eylemleri listeleyen bir menü düğmesiyle birleştiren düğme.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Button dolgusu; iki parça arasında 1 px ayırıcı: primary dolgu üstünde yüzde 30 opak açık çizgi, secondary kenarlık rengi (danger için tehlike kenarlığı) |
color-action-primary-default, color-action-on-primary-default, color-border-default, color-border-danger |
| Üzerine gelme | Her parça kendi rengini koyulaştırır | color-action-primary-hovered |
| Basılı | Parça 0,97’ye küçülür | motion-press-scale |
| Menü açık | Menü düğmesi üzerine gelme dolgusunu korur; ok sabit kalır | color-action-*-hovered |
| Vurgulanan öğe | Öğe zemini koyulaşır | color-surface-hovered |
| Odak | 2 px dış odak halkası | color-focus-ring, border-width-focus |
| Devre dışı | İki parça soluk | color-action-disabled-default |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut | Yükseklik | Menü düğmesi |
|---|---|---|
sm |
32 px (button-height-sm) |
32 × 32 px kare |
md |
36 px (button-height-md) |
36 × 36 px kare |
lg |
40 px (button-height-lg) |
40 × 40 px kare |
Parçalar arasında boşluk yoktur; kenarlıklar üst üste biner ve iç köşeler düzdür (ButtonGroup attached). Menü düğmeden 4 px uzakta açılır, en az 192 px geniştir (menu-min-width), 4 px iç boşluğu vardır (space-xs), köşe yarıçapı radius-md’dir.
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-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-action-secondary-default | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-danger-default | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-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-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-radius-md | 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 |
|---|---|---|---|---|
| Menü açılışı | opacity 0 → 1, scale 0,96 → 1, düğmeye doğru 4 px (motion.popover) |
motion-popover-enter-duration (150 ms) |
motion-popover-enter-easing |
Ölçek ve kayma olmaz; menü yalnızca belirir. |
| Menü kapanışı | opacity ve scale geri |
motion-popover-exit-duration (110 ms) |
motion-popover-exit-easing |
Menü yalnızca solar. |
| Basma | scale 1 → 0,97 |
motion-press-duration (70 ms) |
motion-press-easing |
Ölçek 1 kalır. |
| Vurgulanan öğe | Arka plan rengi (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez. |
Değerler için Hareket sayfasına bakın.