Bileşenler
MonthPicker
Bir yılın on iki ayı arasından ay ve yıl seçtiren alan.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Select tetikleyicisi: giriş kenarlığı ve alan gölgesi | color-border-input, color-surface-raised, input-shadow |
| Açık | Tetikleyicide odak kenarlığı; tablo ortak açılır yüzeyde açılır: ince kenar çizgisi ve açılır gölge | color-border-focus, color-border-overlay, shadow-popup |
| Hücre odakta | Hücrenin 2 px dışına 2 px odak çizgisi | color-focus-ring, border-width-focus, focus-offset |
| Hücre üzerine gelme | Hafif dolgu | color-action-subtle-hovered |
| Seçili hücre | Birincil dolgu | color-action-primary-default, color-action-on-primary-default |
| Bugünkü hücre | Kalın yazı, 1 px iç çerçeve | color-border-focus |
| Seçilemez hücre | Devre dışı metin | color-text-disabled |
| Hata | Tehlike kenarlığı ve çevresinde 2 px tehlike halesi | color-border-danger, color-status-danger-background |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Tetikleyici yüksekliği | 32 / 36 / 40 px (sm / md / lg) |
input-height-sm, input-height-md, input-height-lg |
| Tablo genişliği | 240 px | popover-width-sm |
| Hücre yüksekliği | 36 px | button-height-md |
| Hücre köşe yarıçapı | 6 px | menu-item-radius |
| Hücreler arası | 4 px | space-xxs |
| Tablo iç boşluğu | 8 px | space-md |
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-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--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-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-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Tablo motion.popover ile tetikleyiciden büyüyerek açılır; hücreler basılınca motion.press ile küçülür. Hareketi azaltma tercihinde yalnızca saydamlık değişir.