Bileşenler
Slider
Bir tutamacı iz boyunca sürükleyerek ya da ok tuşlarıyla bir değer veya aralık seçme.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Katman zemininde boş iz, dolu iz ve beyaz tutamaç | color-surface-layer-2, color-action-primary-default |
| Üzerine gelme | Tutamaç %110 | — |
| Sürükleme | Tutamaç %120, balon görünür | color-surface-inverse |
| Klavye odağı | 2 px halka ve balon | color-focus-ring |
| Devre dışı | Soluk iz ve tutamaç | color-border-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| İz kalınlığı | 4 px | slider-track-height |
| Tutamaç | 20 px | slider-thumb-size |
| Dokunma alanı | 40 px | slider-hit-size |
| İz uçlarında tutamaç | İzin içinde (uca hizalı) | slider-thumb-size |
| Dikey iz, en az yükseklik | 160 px | slider-vertical-min-height |
| Balon ile tutamaç arası | 8 px | space-md |
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-slider-track-height | 4px4px4px | 4px4px4px | |
--bigbang-slider-thumb-size | 20px20px20px | 20px20px20px | |
--bigbang-slider-hit-size | 40px40px40px | 40px40px40px | |
--bigbang-slider-vertical-min-height | 160px160px160px | 160px160px160px | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-inverse | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-shadow-raised | 0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549)0px 1px 3px 0px rgba(0, 0, 0, 0.10196078431372549), 0px 1px 2px -1px rgba(0, 0, 0, 0.10196078431372549) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--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 |
|---|---|---|---|---|
| Üzerine gelme, tutma | scale 1,1 ve 1,2 |
motion-release-duration |
easing-spring-productive-fast |
Ölçek 1 kalır. |
| İze tıklama, tuş | Tutamaç ve dolu iz kayar | motion-hover-duration |
easing-productive |
Süre kısalır. |
| Sürükleme | Geçiş yok; işaretçiyi izler | — | — | — |
| Değer balonu | Solar ve 2 px kayar | motion-tooltip-enter-duration |
easing-productive-enter |
Yalnızca solar. |