Bileşenler

ConsentBlock

Kaydırılabilir bir alanda okunacak metin, okuma çubuğu ve sona kadar bekleyebilen bir onay kutusu.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görünüm	Öznitelik
Okunmadı (`requireScroll`)	Onay kutusu devre dışı, ipucu görünür, alt solma görünür	—
Okundu	Onay kutusu açık, solma yok, çubuk dolu	`data-read`
Hata	Onay kutusu tehlike sınırı ve mesajı	`aria-invalid`

Ölçüler

Özellik	Değer	Token
Metin alanı en çok	240 px	`consent-block-max-height`
Metin alanı iç boşluğu	16 / 12 px	`space-xl`, `space-lg`
Okuma çubuğu	2 px	`space-xxs`

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-consent-block-max-height`		`240px240px240px`	`240px240px240px`
`--bigbang-color-surface-sunken`		`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-action-primary-default`		`#146d83#171717#171717`	`#77bacf#e5e5e5#e5e5e5`
`--bigbang-color-text-danger`		`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-motion-progress-duration`		`0.15s0.15s0.15s`	`0.15s0.15s0.15s`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Okuma çubuğu	Kaydırdıkça dolar (`motion.progress`)	`motion-progress-duration`	`easing-productive`	Aynı.
Alt solma	Sona gelince kaybolur	`motion-hover-duration`	`motion-hover-easing`	Aynı; yalnızca opaklık.
Onay işareti	Büyüyerek gelir (`motion.selectionMark`)	`motion-selection-duration`	`motion-selection-easing`	Yalnızca belirir.