Bileşenler
DateRangePicker
Başlangıç ve bitiş parçalarına yazılan ya da hazır aralıklar ve iki aylık takvimle seçilen tarih aralığı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Aralığın ucu | Birincil dolgu | color-action-primary-default |
| Aralığın içi ve önizleme | Seçili yüzey, köşesiz | color-surface-selected |
| Seçili hazır aralık | Seçili yüzey, kalın metin | color-surface-selected |
| Devre dışı hazır aralık | Soluk metin | color-text-disabled |
| Geçersiz | Tehlike kenarlığı ve mesaj | color-border-danger, color-text-danger |
| Devre dışı | Soluk kutu | color-surface-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Alan yüksekliği | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Hazır aralık satırı | En az 32 px | button-height-sm |
| Hazır aralık sütunu | 160 px (768 px üstünde) | — |
| Aylar arası | 16 px | space-xl |
| İki ay eşiği | 1024 px | — |
| Gün hücresi | 40 px | calendar-cell-size |
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-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-action-size-md | 28px28px28px | 28px28px28px | |
--bigbang-calendar-cell-size | 40px40px40px | 40px40px40px | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-shadow-overlay | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Pencere açılır | Solar, ölçeklenir, 4 px kayar (motion.popover) |
motion-popover-enter-duration |
motion-popover-enter-easing |
Yalnızca solar. |
| Aralık önizlemesi | Arka plan rengi | motion-hover-duration |
motion-hover-easing |
Değişmez. |
| Hazır aralığa basma | scale (motion.press) |
motion-press-duration |
motion-press-easing |
Ölçek 1. |
| Ay değişir | 4 px kayarak belirir | motion-list-enter-duration |
easing-productive-enter |
Yalnızca solar. |