Bileşenler
Skeleton
Henüz yüklenen içeriğin biçiminde bir yer tutucu.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Yükleniyor | Katman zemini, üç kez geçen açık vurgu | color-surface-layer-2, color-surface-raised, period-shimmer |
| Azaltılmış hareket | Durağan zemin | color-surface-layer-2 |
| Yüklendi | İçerik belirerek gelir | motion-skeleton-reveal-duration |
Ölçüler
Bölüm başlığı “Ölçüler”| Biçim | Değer | Token |
|---|---|---|
| Metin satırı | 1em yükseklik, 8 px köşe | radius-md |
| Satır arası | 6 px | space-sm |
| Son satır | Genişliğin %60’ı | Yok |
| Blok | Tam genişlik, 16:9, 8 px köşe | radius-md |
| Daire | 32 px | icon-size-xl |
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-surface-layer-2 | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-radius-md | 8px8px8px | 8px8px8px | |
--bigbang-icon-size-xl | 32px32px32px | 32px32px32px | |
--bigbang-space-sm | 6px6px6px | 6px6px6px | |
--bigbang-period-shimmer | 1.5s1.5s1.5s | 1.5s1.5s1.5s | |
--bigbang-motion-skeleton-reveal-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 |
|---|---|---|---|---|
| Vurgu | translate döngüsü, üç kez (motion.skeleton) |
period-shimmer (1500 ms, toplam 4,5 s) |
easing-linear |
Vurgu geçmez (reduce-motion:after:animate-none). |
| İçeriğin gelişi | opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration (110 ms) |
easing-productive-enter |
Değişmez; kısa bir belirmedir. |
Değerler için Hareket sayfasına bakın.