Bileşenler
Combobox
Yazarak daraltılan listeden bir ya da birden çok seçim; sunucu sonuçları ve yeni seçenek ekleme destekli.
- 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ş zemin | color-border-input, color-surface-raised |
| Odak | Odak kenarlığı ve 2 px dış odak çizgisi, 2 px aralıkla | color-border-focus, color-focus-ring |
| Açık | Liste ortak açılır yüzeyde açılır (ince kenar çizgisi, açılır gölge); ok sabit kalır | color-border-overlay, shadow-popup |
| Vurgulanan seçenek | Seçili yüzey dolgusu; satırdaki tek dolgu budur | color-surface-selected |
| Seçili seçenek | Onay işareti; dolgu yok | color-icon-brand |
| Gruplar | label-sm ikincil başlık, seçenek metniyle hizalı; gruplar arasında 1 px çizgi |
text-label-sm, menu-item-padding-inline, color-border-subtle |
| Çip | Gömük zemin; Backspace hedefi seçili zemin alır | color-surface-sunken, color-surface-selected |
| Hata | Tehlike kenarlığı ve ileti | color-border-danger |
| Devre dışı | Soluk zemin ve metin | color-surface-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut | En küçük yükseklik |
|---|---|
sm |
32 px (input-height-sm) |
md |
36 px (input-height-md) |
lg |
40 px (input-height-lg) |
multiple ile çipler satır atladıkça alan büyür. Çipler arası 4 px’tir (space-xs). Ok düğmesi, ya da showClear ile onun yerini alan temizle düğmesi, 32 × 32 px’tir; sm boyda alana sığması için 24 × 24 px olur. Liste alandan 6 px uzakta açılır, alan genişliğindedir, 4 px iç boşluğu vardır (space-xs) ve 252 px’ten sonra kayar (combobox-list-max-height).
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-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-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--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-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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) | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-item-height | 32px32px32px | 32px32px32px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-button-height-xs | 24px24px24px | 24px24px24px | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Liste açılışı | opacity 0 → 1, scale 0,96 → 1, alana doğru 4 px (motion.popover) |
motion-popover-enter-duration (150 ms) |
motion-popover-enter-easing |
Ölçek ve kayma olmaz; liste yalnızca belirir. |
| Liste kapanışı | opacity ve scale geri |
motion-popover-exit-duration (110 ms) |
motion-popover-exit-easing |
Liste yalnızca solar. |
| Onay işareti | opacity ve scale 0,6 → 1 (motion.selectionMark) |
motion-selection-duration (110 ms) |
motion-selection-easing |
Ölçek 1 kalır. |
| Yeni çip | opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Değişmez. |
| Odak ve hata | Kenarlık rengi (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Değişmez. |
Değerler için Hareket sayfasına bakın.