Bileşenler
PasswordInput
Göz düğmeli şifre alanı; isteğe bağlı koşul listesi, güç çubuğu ve büyük harf uyarısı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Gizli | Değer noktalarla, göz ikonu | color-text-subtle |
| Gösterilen | Düz metin, üstü çizili göz ikonu büyüyerek gelir | color-text-default |
| Koşul karşılandı | Yeşil metin ve onay ikonu | color-text-success |
| Güç | 1, 2 ya da 3 parça dolar | color-status-danger-emphasis, color-status-warning-emphasis, color-status-success-emphasis |
| Büyük harf kilidi | Uyarı ikonu ve metin | color-text-warning |
| Geçersiz | Tehlike kenarlığı, hata metni | color-border-danger, color-text-danger |
| Devre dışı | Soluk kutu ve düğme | color-surface-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Yükseklik | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Göz düğmesi | 24 / 28 / 32 px | input-action-size-sm, input-action-size-md, input-action-size-lg |
| Koşul ikonu | 16 px | icon-size-sm |
| Güç çubuğu | 4 px yükseklik, 2 px aralık | space-xs, space-xxs |
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-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-action-size-md | 28px28px28px | 28px28px28px | |
--bigbang-input-action-size-lg | 32px32px32px | 32px32px32px | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-status-danger-emphasis | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-warning-emphasis | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Göz düğmesine basma | scale (motion.press) |
motion-press-duration, motion-release-duration |
motion-press-easing, easing-spring-productive-fast |
Ölçek 1 kalır. |
| İkon değişimi | Yeni ikon %60’tan büyür (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
Ölçek 1; yalnızca solar. |
| Koşul karşılandı | Renk geçişi ve ikon büyümesi | motion-hover-duration, motion-feedback-duration |
motion-hover-easing, motion-feedback-easing |
Yalnızca renk değişir. |
| Güç çubuğu | background-color |
motion-progress-duration |
easing-productive |
Değişmez. |
| Büyük harf uyarısı | Belirir ve 4 px iner (motion.fieldMessage) |
motion-collapsible-duration |
motion-collapsible-easing |
Yalnızca solar. |
Değerler için Hareket sayfasına bakın.