Bileşenler
CountdownTimer
Bir ana kadar kalan süreyi saat olarak, isteğe bağlı boşalan halkayla, uyarı rengiyle ve sesli ara bildirimlerle gösterir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Renk | Öznitelik |
|---|---|---|
| Sayıyor | color-text-default |
— |
| Uyarı | color-text-warning |
data-warning |
| Doldu | color-text-subtle |
data-done |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Halka | 40 px | countdown-timer-ring-size |
| Halka kalınlığı | 3 / 40 | — |
| Halka ile saat arası | 8 px | space-sm |
| Yazı | sm gövde, md etiket, lg başlık |
type-body-sm, type-label-md, type-heading-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-countdown-timer-ring-size | 40px40px40px | 40px40px40px | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-motion-hover-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Halka | Her saniye doğrusal olarak boşalır | 1 s | doğrusal | Adım adım değişir. |
| Uyarı ve bitiş | Renk geçişi | motion-hover-duration |
motion-hover-easing |
Aynı; yalnızca renk. |