Bileşenler
Meter
Bilinen bir aralıktaki tek bir değeri çubukla gösterir: kullanılan depolama, kota, puan.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Katman zemininde iz, markalı dolgu | color-surface-layer-2, color-status-brand-emphasis |
| Ton: nötr, başarı, uyarı, tehlike | Var | Dolgu rengi değişir | color-status-neutral-emphasis, color-status-success-emphasis, color-status-warning-emphasis, color-status-danger-emphasis |
| Değer değişir | Var | Dolgu 150 ms’de yeni uzunluğa ölçeklenir | motion-progress-duration |
| Zorunlu renkler | Var | İz 1 px sistem çerçevesi, dolgu sistem vurgu rengi | - |
| Üzerine gelme, basılı, odak | Yok | Durağan; etkileşimli parçası yoktur | - |
| Devre dışı | Yok | Devre dışı durumu yoktur | - |
| Yükleniyor, hata | Kompozisyon | Skeleton ya da hata bileşeniyle değiştirin | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
İz yüksekliği, md |
8 px | meter-height-md |
İz yüksekliği, sm |
4 px | meter-height-sm |
| İz köşesi | tam yuvarlak | meter-radius |
| Etiket ile çubuk arası | 4 px | space-xs |
| Etiket ile değer arası | en az 8 px | space-md |
| Etiket ve değer stili | 14 px / 20 px, orta kalınlık; değer tablo rakamlı | label-md |
| Açıklama stili | 12 px / 16 px | body-sm |
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-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-status-brand-emphasis | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-status-neutral-emphasis | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-status-warning-emphasis | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-status-danger-emphasis | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-meter-height-sm | 4px4px4px | 4px4px4px | |
--bigbang-meter-height-md | 8px8px8px | 8px8px8px | |
--bigbang-meter-radius | 9999px9999px9999px | 9999px9999px9999px | |
--bigbang-motion-progress-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| İlk görünüş | Dolgu sıfırdan değere scale-x ile büyür, motion-progress-duration (motion.progress) |
Token süreyi kısaltır; hareket neredeyse yok |
| Değer değişir | Dolgu yeni uzunluğa aynı süreyle ölçeklenir | Aynı |
| Sağdan sola | Dolgu sağ kenardan büyür (rtl:origin-right) |
Aynı |
| Döngü | Yok; hiçbir durumda tekrar etmez | Aynı |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.