Bileşenler
ToggleGroup
Tek bir değeri paylaşan Toggle seti; tek sekme durağı, öğeler arasında ok tuşları.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Öğelerin durumları Toggle ile aynıdır; Toggle özellikler sekmesine bakın.
| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Öğeler arasında 8 px boşluk | space-md |
| Basılı öğe | Seçili dolgu ve kenarlık | color-surface-selected, color-border-selected |
| Odaktaki öğe | 2 px odak halkası; öğe öne gelir | color-focus-ring |
| Devre dışı | Tüm öğeler soluk | color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Öğeler arası boşluk | 8 px | space-md |
| Öğe yüksekliği | 32, 36 ya da 40 px (size) |
button-height-* |
| Genişlik | İçeriği kadar (w-fit) |
- |
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-space-md | 8px8px8px | 8px8px8px | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-border-selected | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Basma ve basılı duruma geçiş | Her öğe Toggle’ın motion.press hareketini kullanır: 70 ms basma, 230 ms bırakma, renkler 110 ms |
Ölçek 1 kalır; yalnızca renk değişir |
| Odağın ok tuşlarıyla taşınması | Geçişsiz; halka yeni öğede anında belirir | Değişmez |
Grubun kendi hareketi yoktur. Değerler için Hareket sayfasına bakın.