Bileşenler
Select
Kısa ve kapalı bir listeden tek seçim; tetikleyiciden açılan bir liste.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Girdi kenarlığı, yükseltilmiş zemin; boşsa yer tutucu rengi | color-border-input, color-surface-raised, color-text-placeholder |
| Odak ya da liste açık | Kenarlık odak rengi; odakta 2 px dış odak çizgisi, 2 px aralıkla | color-border-focus, color-focus-ring |
| Geçersiz | Tehlike kenarlığı, çevresinde 2 px tehlike halesi ve hata metni | color-border-danger, color-status-danger-background, color-text-danger |
| 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 (multiple ile birden çok satır işaretli) |
color-icon-brand |
| Devre dışı | Soluk zemin, kenarlık ve metin | color-surface-disabled, color-border-disabled, color-text-disabled |
| Salt okunur | Görünüm değişmez; liste açılmaz | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Tetikleyici yüksekliği | 32, 36 ya da 40 px | input-height-sm, input-height-md, input-height-lg |
| Tetikleyici genişliği | Değere göre; fullWidth alanı doldurur |
- |
| Tetikleyici iç boşluğu | Başta 12 px, sonda 8 px | input-padding-inline, space-md |
| Liste ile tetikleyici arası | 4 px | - |
| Liste iç boşluğu | 4 px | space-xs |
| Seçenek 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 köşe yarıçapı | 10 px | menu-radius |
| Grup başlığı | label-sm ikincil metin, seçenek metniyle hizalı: yatayda 8 px, üstte 6 px, altta 2 px |
text-label-sm, menu-item-padding-inline |
| Ayırıcı | Üstünde ve altında 4 px boşlukla 1 px çizgi | color-border-subtle, space-xs |
| Liste genişliği | En az tetikleyici kadar | - |
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-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-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--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-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-menu-inset | 4px4px4px | 4px4px4px |
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, tetikleyiciye 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. |
| Vurgulanan seçenek | Arka plan rengi (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; renk geçişidir. |
| Tetikleyici odağı ve hatası | 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.