Bileşenler
RadioGroup
Birbirini dışlayan seçenekleri bir başlık altında toplayan ve tek seçime izin veren grup.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Seçili değil | Girdi kenarlığı, yükseltilmiş zemin | color-border-input, color-surface-raised |
| Seçili | Birincil dolgu ve beyaz nokta | color-action-primary-default, color-action-on-primary-default |
| Odak | 2 px dış odak halkası, 2 px aralıkla | color-focus-ring, border-width-focus |
| Geçersiz | Tüm dairelerde tehlike kenarlığı, hata metni | color-border-danger, color-text-danger |
| Devre dışı | Soluk daire, nokta ve etiket | color-surface-disabled, color-border-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Daire | 16 × 16 px | radio-size |
| Nokta | 6 × 6 px | radio-size × 0,375 |
| Daire ile etiket arası | 8 px | space-md |
| Dikey öğe arası | 8 px | space-md |
| Yatay öğe arası | 12 px | space-lg |
| Etiket yazı stili | body-md (14 px) |
text.body-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-radio-size | 16px16px16px | 16px16px16px | |
--bigbang-color-border-strong | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--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-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-space-md | 8px8px8px | 8px8px8px | |
--bigbang-space-lg | 12px12px12px | 12px12px12px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Seçme | Nokta opacity 0 → 1 ve scale 0,6 → 1 (motion.selectionMark) |
motion-selection-duration (110 ms) |
motion-selection-easing |
Ölçek 1 kalır; nokta yalnızca belirir. |
| Daire dolgusu ve kenarlığı | background-color, border-color (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; renk geçişidir. |
| Hata metninin girişi | opacity ve 4 px inme (motion.fieldMessage) |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Mesafe 0 olur; metin yalnızca belirir. |
Değerler için Hareket sayfasına bakın.