Bileşenler
Label
Field dışındaki bir denetimi adlandıran, zorunluluk işaretini taşıyan etiket.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Etiket metni | color-text-default |
| Zorunlu | Tehlike renginde * |
color-text-danger |
| İsteğe bağlı | Soluk “(isteğe bağlı)” | color-text-subtle |
| Devre dışı | Soluk metin, not-allowed imleci |
color-text-disabled |
Label’ın üzerine gelme, basılı ve odak durumu yoktur.
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
md yazı stili |
14 px | text.label-md |
sm yazı stili |
12 px | text.label-sm |
| Öğeler arası, örneğin simge ile metin | 8 px | space-md |
Metin ile * arası |
2 px | space-xxs |
| Metin ile “(isteğe bağlı)” arası | 4 px | space-xs |
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-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-space-xxs | 2px2px2px | 2px2px2px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px | |
--bigbang-space-md | 8px8px8px | 8px8px8px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Tıklama | Yok: odak denetime taşınır, Label değişmez | Azaltılacak bir şey yok |
| Giriş ve çıkış | Yok | Uygulanmaz |
Label hareket preset’i kullanmaz; etkileşim denetimdedir. Değerler için Hareket sayfasına bakın.