Bileşenler
DateTimePicker
Tarihi ve saati birlikte seçtiren alan grubu: bir DatePicker ve bir TimeField.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”İki bölüm kendi durumlarını taşır; grup yalnızca hata ve devre dışı durumunu ikisine birden uygular.
| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | İki giriş kutusu yan yana, alan gölgesiyle | color-border-input, color-surface-raised, input-shadow |
| Odak | Odaktaki bölümün 2 px dışına 2 px odak çizgisi | color-border-focus, color-focus-ring |
| Hata | İki kutuda tehlike kenarlığı ve 2 px tehlike halesi, altta ileti | color-border-danger, color-status-danger-background, color-text-danger |
| Devre dışı | İki kutu devre dışı | color-surface-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Bölümler arası | 8 px | space-md |
| Tarih bölümünün taban genişliği | 240 px | popover-width-sm |
| Yükseklik | 32 / 36 / 40 px (sm / md / lg) |
input-height-sm, input-height-md, input-height-lg |
| Lejant ile bölümler arası | 4 px | space-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-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-space-md | 8px8px8px | 8px8px8px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--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-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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 |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Hata iletisi motion.fieldMessage ile belirir. Takvim DatePicker’daki gibi motion.popover ile açılır.