Bileşenler
CheckboxGroup
İlişkili onay kutularını bir başlık altında toplayan ve değer listesini paylaştıran grup.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Başlık, yardım metni ve öğeler | color-text-default, color-text-subtle |
| Geçersiz | Hata metni | color-text-danger |
| Devre dışı | Tüm öğeler soluk | color-text-disabled |
Öğe durumları için Checkbox özellikler sekmesine bakın.
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Parçalar arası boşluk | 6 px | space-sm |
| Dikey öğe arası | 6 px | space-sm |
| Yatay öğe arası | 12 px | space-lg |
| Başlık stili | label-md (14 px) |
text.label-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-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-space-sm | 6px6px6px | 6px6px6px | |
--bigbang-space-lg | 12px12px12px | 12px12px12px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Hata metninin girişi | opacity ve 4 px inme (motion.fieldMessage), motion-collapsible-duration (150 ms) |
Mesafe 0 olur; metin yalnızca belirir |
| Öğelerin işaretlenmesi | Her öğe Checkbox’ın motion.selectionMark hareketini kullanır (110 ms) |
Ölçek 1 kalır |
Değerler için Hareket sayfasına bakın.