Bileşenler
InlineEdit
Metin olarak gösterilen ve yerinde bir giriş alanına dönüşen değer; kaydet ve vazgeç ile.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Görüntüleme | Metin ve kalem düğmesi | color-text-default |
| Boş | Soluk boş metni | color-text-subtle |
| Düzenleme | TextInput kutusu (alan gölgesi, odakta kutunun 2 px dışına 2 px odak çizgisi), kaydet ve vazgeç | input-shadow, color-border-focus, color-focus-ring |
| Hata | TextInput gibi tehlike kenarlığı ve 2 px tehlike halesi, altta ileti | color-border-danger, color-status-danger-background, color-text-danger |
| Kaydediliyor | Kaydet düğmesinde yükleniyor | Button ile aynı |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Düzenle düğmesi | 32 px | button-height-sm |
| Alan ve düğmeler | 36 px; dokunmatik ekranda 40 px | input-height-md, button-height-md |
| Öğeler arası | 4 px | space-xs |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-input-shadow | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Görünüm ve alan arasında geçiş anlıktır. Hata iletisi motion.fieldMessage ile belirir; düğmeler motion.press kullanır.