Bileşenler
InputGroup
Metin denetimini önüne, arkasına, üstüne ya da altına gelen eklerle tek kutuda toplar.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Kutuda girdi kenarlığı, yükseltilmiş zemin; ek metni soluk | color-border-input, color-surface-raised, color-text-subtle |
| Odak | Kutunun kenarlığı odak rengine geçer; 2 px dış odak çizgisi, 2 px aralıkla | color-border-focus, color-focus-ring |
| Geçersiz | Kutuda tehlike kenarlığı, çevresinde 2 px tehlike halesi ve hata metni | color-border-danger, color-status-danger-background, color-text-danger |
| Devre dışı | Soluk zemin, kenarlık ve ek metni | color-surface-disabled, color-border-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Girdi satırı yüksekliği | 32, 36 ya da 40 px | input-height-sm, input-height-md, input-height-lg |
| Kenar iç boşluğu | input-padding-inline |
input-padding-inline |
| Ek metni | label-md (14/20, orta kalınlık), ikincil renk |
text.label-md, color-text-subtle |
| Ek içinde boşluk | 8 px | space-md |
| Blok ekin kutu kenarına doğru iç boşluğu | 8 px | space-md |
| Blok ek ayırıcısı | 1 px, yalnızca divider ile |
color-border-subtle |
InputGroup.Button |
24 px yükseklik (yalnız ikonluysa kare), yatayda 6 px iç boşluk, radius-sm; kutu kenarından 8 px |
input-group-button-size, space-sm, space-md |
| Köşe yarıçapı | input-radius |
input-radius |
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-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-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--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-group-button-size | 24px24px24px | 24px24px24px | |
--bigbang-space-md | 8px8px8px | 8px8px8px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Odak, geçersiz ve devre dışı renkleri | Kutunun kenarlık ve arka plan rengi (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Değişmez; yalnızca renk geçişidir. |
| Odak halkası | Kutunun tamamında, geçişsiz | Yok | Yok | Değişmez. |
| Hata metninin girişi | opacity ve 4 px yukarıdan inme (motion.fieldMessage) |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Mesafe 0 olur; metin yalnızca belirir. |
| Ekteki buton | motion.press (%97 ölçek, motion-press-scale) |
motion-press-duration (70 ms), motion-release-duration (230 ms) |
motion-press-easing |
Ölçek 1 kalır. |
Değerler için Hareket sayfasına bakın.