Bileşenler
ResultState
Bir görevin ya da akışın sonunda sonucu, bundan sonra ne olacağını ve sonraki adımları gösteren ekran.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Ton | İkon | Token’lar |
|---|---|---|
success |
circle-check |
color-status-success-background, color-icon-success |
danger |
circle-alert |
color-status-danger-background, color-icon-danger |
warning |
triangle-alert |
color-status-warning-background, color-icon-warning |
info |
info |
color-status-info-background, color-icon-info |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| İkon alanı | 64 px | empty-state-media-md |
| İkon | 24 px | icon-size-lg |
| Metin genişliği | En fazla 440 px | empty-state-text-width |
| Başlık | lg |
text.heading-lg |
sm boyutu EmptyState sm düzenini kullanır: 12 px yatay, 16 px dikey iç boşluk, 8 px aralık, empty-state-media-sm ikon alanı, 20 px ikon ve küçük başlık.
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-empty-state-media-md | 64px64px64px | 64px64px64px | |
--bigbang-empty-state-text-width | 440px440px440px | 440px440px440px | |
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-status-warning-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-status-info-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-motion-feedback-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s | |
--bigbang-motion-feedback-easing | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | |
--bigbang-motion-feedback-scale | 0.60.60.6 | 0.60.60.6 |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
İkon (motion.success) |
opacity, scale |
motion-feedback-duration |
motion-feedback-easing |
Yalnızca belirir. |
Metin (motion.reveal) |
opacity |
motion-skeleton-reveal-duration |
easing-productive-enter |
Kısa sürer. |
Değerler için Hareket sayfasına bakın.