Bileşenler

DatePicker

Gün, ay ve yıl parçalarına yazılan ya da açılır takvimden seçilen tarih alanı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Boş	Yer tutucu parçalar	`color-text-placeholder`
Odaktaki parça	Birincil dolgu	`color-action-primary-default`
Açık	Takvim açılır	`shadow-overlay`, `radius-lg`
Geçersiz	Tehlike kenarlığı ve mesaj	`color-border-danger`, `color-text-danger`
Salt okunur	Takvim düğmesi devre dışı	`color-text-disabled`
Devre dışı	Soluk kutu	`color-surface-disabled`

Ölçüler

Özellik	Değer	Token
Yükseklik	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Takvim düğmesi	24 / 28 / 32 px	`input-action-size-sm`, `input-action-size-md`, `input-action-size-lg`
Açılır konumu	Alanın altında, başlangıcına hizalı, 4 px uzakta	`space-xs`
Açılır iç boşluğu	8 px	`space-md`
Gün hücresi	40 px	`calendar-cell-size`

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-text-placeholder`		`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--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

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Takvim açılır	Solar, ölçeklenir, 4 px kayar (`motion.popover`)	`motion-popover-enter-duration`	`motion-popover-enter-easing`	Yalnızca solar.
Takvim kapanır	Daha hızlı solar	`motion-popover-exit-duration`	`motion-popover-exit-easing`	Yalnızca solar.
Parça odağı	Dolgu rengi	`motion-hover-duration`	`motion-hover-easing`	Değişmez.
Takvim düğmesine basma	`scale` (`motion.press`)	`motion-press-duration`	`motion-press-easing`	Ölçek 1.

Ay ızgarasının hareketleri için Calendar sayfasına bakın.