Bileşenler
Autocomplete
Yazarken öneri gösteren, ama her metni kabul eden metin alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Giriş kenarlığı, yükseltilmiş yüzey ve alan gölgesi | color-border-input, color-surface-raised, input-shadow |
| Odak | Odak kenarlığı; kutunun 2 px dışına 2 px odak çizgisi | color-border-focus, color-focus-ring |
| Liste açık | Ortak açılır yüzey: ince kenar çizgisi ve açılır gölge | color-surface-raised, color-border-overlay, shadow-popup |
| Vurgulu öneri | Seçili yüzey dolgusu, menü satırlarıyla aynı | color-surface-selected |
| Hata | Tehlike kenarlığı ve çevresinde 2 px tehlike halesi | color-border-danger, color-status-danger-background |
| Devre dışı | Devre dışı yüzey ve metin | 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 (sm / md / lg) |
input-height-sm, input-height-md, input-height-lg |
| Liste en büyük yüksekliği | Combobox ile aynı | combobox-list-max-height |
| Öneri satırı | En az 32 px; 4 px dikey, 8 px yatay iç boşluk; 6 px köşe | menu-item-height, menu-item-padding-block, menu-item-padding-inline, menu-item-radius |
| Liste iç boşluğu | 4 px | menu-inset |
| Temizle düğmesi | 32 px; sm boyda 24 px |
button-height-sm, button-height-xs |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--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-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-combobox-list-max-height | 252px252px252px | 252px252px252px | |
--bigbang-menu-item-height | 32px32px32px | 32px32px32px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-menu-inset | 4px4px4px | 4px4px4px | |
--bigbang-shadow-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Liste motion.popover ile alandan büyüyerek açılır, daha hızlı kapanır. Vurgulanan öneri motion.hover hızında boyanır.