Bileşenler
Switch
Hemen etki eden açık ya da kapalı bir ayar ve yanındaki etiket.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Kapalı | Güçlü ray, başparmak başlangıçta | color-border-strong, color-surface-raised |
| Açık | Birincil ray, başparmak bitişte | color-action-primary-default |
| Kaydediliyor | Başparmakta 12 px dönen halka | color-action-primary-default, period-spinner |
| Odak | 2 px dış odak halkası, 2 px aralıkla | color-focus-ring, border-width-focus |
| Devre dışı | Soluk ray, başparmak ve etiket | color-surface-disabled, color-border-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
Ray, md (varsayılan) |
32 × 18 px | switch-width-md, switch-height-md |
Ray, sm |
24 × 14 px | switch-width-sm, switch-height-sm |
| Başparmak | 16 px (sm 12 px), küçük gölgeli |
switch-thumb-md, switch-thumb-sm, shadow-raised |
| Tıklama alanı | Ray artı her yanda 12 px, üstte ve altta 8 px | space-lg, space-md |
| Ray iç boşluğu | 1 px | (switch-height − switch-thumb) / 2 |
| Başparmak yolu | 14 px (sm 10 px) |
switch-width − switch-height |
| Ray ile etiket arası | 8 px | space-md |
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-switch-width-md | 32px32px32px | 32px32px32px | |
--bigbang-switch-height-md | 18px18px18px | 18px18px18px | |
--bigbang-switch-thumb-md | 16px16px16px | 16px16px16px | |
--bigbang-switch-width-sm | 24px24px24px | 24px24px24px | |
--bigbang-switch-height-sm | 14px14px14px | 14px14px14px | |
--bigbang-switch-thumb-sm | 12px12px12px | 12px12px12px | |
--bigbang-color-border-strong | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-space-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 |
|---|---|---|---|---|
| Açma ve kapama | Başparmak translate (motion.switchThumb) |
motion-switch-duration (230 ms) |
easing-spring-productive-fast |
Süre 1 ms olur; başparmak yerine atlar. |
| Ray rengi | background-color (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; renk geçişidir. |
| Kaydediliyor | Halka döner (animate-spin) |
period-spinner (1000 ms) |
Doğrusal | Dönüş durur; durum metinle bildirilir. |
Değerler için Hareket sayfasına bakın.