Bileşenler

TimeField

Saat ve dakika (isteğe bağlı saniye) parçalarına yazılan 24 saatlik saat alanı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Boş	Yer tutucu parçalar (`SS`, `DD`)	`color-text-placeholder`
Odaktaki parça	Birincil dolgu	`color-action-primary-default`, `color-action-on-primary-default`
Geçersiz	Tehlike kenarlığı ve mesaj	`color-border-danger`, `color-text-danger`
Salt okunur	Değer değişmez	—
Devre dışı	Soluk kutu ve simge	`color-surface-disabled`, `color-text-disabled`

Ölçüler

Özellik	Değer	Token
Yükseklik	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Simge	16 px	`icon-size-sm`
Simge ile parçalar arası	8 px	`space-md`

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-icon-size-sm`		`16px16px16px`	`16px16px16px`
`--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-text-placeholder`		`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Parça odağı	Dolgu ve metin rengi	`motion-hover-duration`	`motion-hover-easing`	Değişmez.
Alan odağı	Kenarlık ve odak halkası (`motion.field`)	`motion-hover-duration`	`motion-hover-easing`	Değişmez.
Hata mesajı	Solarak ve 4 px kayarak belirir (`motion.fieldMessage`)	`motion-list-enter-duration`	`easing-productive-enter`	Yalnızca solar.

Değerler için Hareket sayfasına bakın.