Bileşenler
NumberField
Para olmayan sayılar için adım düğmeli, yerel biçimli sayı alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Boş | Yer tutucu metin | color-text-placeholder |
| Odak | Kenarlık odak rengine geçer; 2 px dış odak çizgisi, 2 px aralıkla | color-border-focus, color-focus-ring |
| Sınırda | O yöndeki adım düğmesi soluk | color-text-disabled |
| Geçersiz | Tehlike kenarlığı, hata metni | color-border-danger, color-text-danger |
| Salt okunur | Düğmeler etkisiz, değer seçilebilir | color-text-disabled |
| Devre dışı | Soluk kutu, etiket ve düğmeler | color-surface-disabled, color-border-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 |
| Adım düğmesi | 24 / 28 / 32 px kare | input-action-size-sm, input-action-size-md, input-action-size-lg |
| Düğme ikonu | 16 px | icon-size-sm |
| Kutu iç boşluğu | 12 px başta, 2 px sonda (düğmelerle) | input-padding-inline, space-xxs |
| Rakamlar | Eşit genişlikte (tabular-nums) |
— |
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-radius | 10px10px10px | 10px10px10px | |
--bigbang-input-padding-inline | 12px12px12px | 12px12px12px | |
--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-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--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 |
|---|---|---|---|---|
| Adım düğmesine basma | scale 0,97 (motion.press) |
motion-press-duration (70 ms), bırakınca motion-release-duration |
motion-press-easing, easing-spring-productive-fast |
Ölçek 1 kalır; yalnızca renk değişir. |
| Düğme üzerine gelme | background-color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; renk geçişidir. |
| Odak ve hata | Kenarlık rengi (motion.field) |
motion-focus-duration |
motion-focus-easing |
Değişmez. |
| Hata metni | Belirir ve 4 px iner (motion.fieldMessage) |
motion-collapsible-duration |
motion-collapsible-easing |
Mesafe 0 olur; yalnızca solar. |
Basılı tutulan adım düğmesi değeri tekrar tekrar değiştirir (Base UI basılı tutma). Değerler için Hareket sayfasına bakın.