Bileşenler
Icon
Kayıtlı ikon setinden bir simge çizer; ad verilmedikçe süstür ve ekran okuyucudan gizlenir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Icon etkileşimli değildir; fare, klavye ya da dokunma ile görünümü değişmez.
| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Seçilen boyut ve ton | icon-size-*, color-icon-* |
| Üzerine gelme | Yok | Yok | - |
| Basılı | Yok | Yok | - |
| Odak | Yok | Yok; odak almaz | - |
| Devre dışı | Kısmen | tone="disabled" soluk renk verir; ikonun kendi devre dışı durumu yoktur |
color-icon-disabled |
| Sağdan sola | Var | Yönü izleyen ikonlar yatay ters döner | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
Boyut, xs |
12 px | icon-size-xs |
Boyut, sm |
16 px | icon-size-sm |
Boyut, md (varsayılan) |
20 px | icon-size-md |
Boyut, lg |
24 px | icon-size-lg |
Boyut, xl |
32 px | icon-size-xl |
Boyut, inherit |
Üst bileşenin kutusu (size-full) |
- |
| Çizgi kalınlığı | 2 | - |
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-icon-default | #262626#262626#262626 | #f5f5f5#f5f5f5#f5f5f5 | |
--bigbang-color-icon-subtle | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-icon-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-icon-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-icon-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-icon-success | #138a50#138a50#138a50 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-icon-warning | #a16600#a16600#a16600 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-icon-info | #007ac1#007ac1#007ac1 | #79c2ff#79c2ff#79c2ff | |
--bigbang-icon-size-xs | 12px12px12px | 12px12px12px | |
--bigbang-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-icon-size-md | 20px20px20px | 20px20px20px | |
--bigbang-icon-size-lg | 24px24px24px | 24px24px24px | |
--bigbang-icon-size-xl | 32px32px32px | 32px32px32px |
tone="current" token kullanmaz; text-current ile çevresindeki metnin rengini alır.
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Üzerine gelme, basma, odak | Yok: Icon etkileşimli değildir | Azaltılacak bir şey yok |
| Giriş ve çıkış | Yok: Icon hemen görünür ve hemen kalkar | Azaltılacak bir şey yok |
| Dönme ya da canlandırma | Yok: Icon kendi animasyonunu içermez | Azaltılacak bir şey yok |
Icon hiçbir hareket preset’i kullanmaz; içinde bulunduğu bileşenin hareketi (Button’ın basma ölçeği gibi) o bileşenin sayfasındadır. Hareket değerleri için Hareket sayfasına bakın.