Bileşenler

SaveBar

Formda kaydedilmemiş değişiklik varken alttan yükselen, Kaydet ve Vazgeç düğmeli çubuk.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Kapalı	Aşağıda ve görünmez	—
Açık	Yükseltilmiş yüzey, üst kenarlık, gölge	`color-surface-raised`, `shadow-overlay`
Kaydediliyor	Kaydet’te döner gösterge	—
Kaydedildi	Kaydet’te onay	—

Ölçüler

Özellik	Değer	Token
Yatay iç boşluk	16 px	`space-xl`
Dikey iç boşluk	8 px	`space-md`
İçerik genişliği	Büyük kap	`container-max-width-lg`
640 px altında	Düğmeler tam genişlikte	—

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-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--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-space-xl`		`16px16px16px`	`16px16px16px`
`--bigbang-space-md`		`8px8px8px`	`8px8px8px`
`--bigbang-container-max-width-lg`		`1440px1440px1440px`	`1440px1440px1440px`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Açılır	Kendi yüksekliği kadar aşağıdan yükselir, solar	`motion-list-move-duration`, `motion-toast-enter-duration`	`easing-spring-productive-base`, `motion-toast-enter-easing`	Kaymaz; yalnızca solar.
Kapanır	Daha hızlı iner ve solar	`motion-toast-exit-duration`	`motion-toast-exit-easing`	Yalnızca solar.
Kaydet	Döner gösterge, sonra onay	Button	Button	Button ile aynı.