Bileşenler
TextInput
Kullanıcının tek satırlık bir metin ya da sayı girmesini sağlar; etiket, yardım metni ve hata mesajı alana bağlı gelir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Desteklenir | Görsel değişiklik | Token / öznitelik |
|---|---|---|---|
| Varsayılan | Evet | raised yüzey, 1 px girdi kenarlığı |
color-surface-raised, color-border-input |
| Üzerine gelme | Evet | Bu sürümde görsel değişiklik yok | Yok |
| Odakta | Evet | Kutu kenarlığı odak rengine geçer; 2 px odak çizgisi kutunun 2 px dışına çizilir (focus-within) |
color-border-focus, color-focus-ring, border-width-focus; data-focused |
| Dolu | Evet | Görsel değişiklik yok | data-filled |
| Geçersiz | Evet | Kenarlık tehlike rengine geçer ve çevresinde 2 px tehlike halesi belirir; hata metni görünür | color-border-danger, color-status-danger-background, color-text-danger; data-invalid (error ya da invalid ile) |
| Geçersiz ve odakta | Evet | Odak kenarlığı ve halkası geçersiz kenarlığın yerini alır; hata metni görünmeye devam eder | color-border-focus, color-focus-ring; data-invalid, data-focused |
| Devre dışı | Evet | Yüzey, kenarlık ve metin devre dışı renklerine geçer; imleç “izin yok” olur | color-surface-disabled, color-border-disabled, color-text-disabled; data-disabled |
| Salt okunur | Evet | Görsel değişiklik yok; odak alır, değer forma gönderilir | data-readonly |
| Zorunlu | Evet | Etikete * işareti gelir |
color-text-danger; data-required |
Ölçüler
Bölüm başlığı “Ölçüler”| Ölçü | Değer | Token |
|---|---|---|
Yükseklik, sm |
32 px | input-height-sm |
Yükseklik, md |
36 px; dokunmatikte 44 px | input-height-md |
Yükseklik, lg |
40 px; dokunmatikte 48 px | input-height-lg |
| Yatay iç boşluk | 12 px | input-padding-inline (space-lg) |
| Köşe yarıçapı | 10 px | input-radius (radius-lg) |
| Etiket, kutu, yardım metni ve hata metni arası | 4 px | space-xs |
| Başta içerik, girdi ve sonda içerik arası | 6 px | space-sm |
| Kenarlık | 1 px | Yok (sabit) |
| Odak halkası | 2 px | border-width-focus |
| Etiket yazı stili | label-md |
text-label-md |
| Değer yazı stili | body-md |
text-body-md |
| Yardım ve hata metni yazı stili | body-sm |
text-body-sm |
sm, md ve lg boyları Button’ın aynı adlı boylarıyla (32, 36 ve 40 px) aynı yüksekliktedir; aynı satırda yan yana durduklarında hizalanırlar. Kaba işaretçili (dokunmatik) ekranlarda ikisi de birlikte büyür: md 44 px, lg 48 px.
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-disabled | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-disabled | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-placeholder | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-padding-inline | 12px12px12px | 12px12px12px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px | |
--bigbang-space-sm | 6px6px6px | 6px6px6px | |
--bigbang-border-width-focus | 2px2px2px | 2px2px2px | |
--bigbang-duration-fast | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-easing-productive | cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9) | cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9) |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Yumuşatma token’ı | Azaltılmış hareket |
|---|---|---|---|---|
| Odak, geçersiz ve devre dışı renkleri | Kenarlık, arka plan ve metin rengi (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Değişmez; yalnızca renk geçişidir |
| Odak halkası | Yok | Anında çizilir | Yok | Değişmez |
| Üzerine gelme ve basma | Yok | Hareket yok | Yok | Hareket yok |
| Hata metninin girişi | opacity ve 4 px yukarıdan inme (motion.fieldMessage); sallanma yok |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Mesafe 0 olur; metin yalnızca belirir |
Değerlerin tamamı token’lardan gelir; ayrıntı için Hareket temeli sayfasına bakın.