Bileşenler

SegmentedControl

Aynı içeriğin iki ile beş görünümü arasında tek seçim yapan, kayan göstergeli denetim.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Soluk etiket, katman zemininde iz	`color-fg-subtle`, `color-surface-layer-2`
Üzerine gelme	Seçili olmayan seçenekte koyu etiket ve hafif dolgu	`color-fg-default`, `color-action-subtle-hovered`
Basılı	Seçenek 0,97’ye küçülür	`motion-press-scale`
Seçili	Koyu etiket, yükseltilmiş dolgu ve gölge	`color-fg-default`, `color-surface-raised`, `shadow-raised`
Odak	2 px dış odak halkası, 2 px aralıkla	`color-focus-ring`, `border-width-focus`
Devre dışı	Soluk etiket, `not-allowed` imleci	`color-fg-disabled`

Ölçüler

Boyut	Yükseklik	Yatay iç boşluk	Metin	İkon
`sm`	32 px (`tab-height-sm`)	8 px (`tab-padding-inline-sm`)	`text-label-sm`	`icon-size-sm`
`md`	36 px (`tab-height-md`)	12 px (`tab-padding-inline-md`)	`text-label-md`	`icon-size-md`

İzin iç boşluğu ve seçenekler arası aralık 2 px’tir (space-xxs). İzin köşe yarıçapı tab-radius; dolgu ve seçenekler bundan iç boşluk kadar küçüktür. Toplam yükseklik seçenek yüksekliği artı 4 px’tir.

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
`--bigbang-tab-height-sm`	`32px32px32px`	`32px32px32px`
`--bigbang-tab-height-md`	`36px36px36px`	`36px36px36px`
`--bigbang-tab-padding-inline-sm`	`6px6px6px`	`6px6px6px`
`--bigbang-tab-padding-inline-md`	`8px8px8px`	`8px8px8px`
`--bigbang-tab-radius`	`10px10px10px`	`10px10px10px`
`--bigbang-color-surface-sunken`	`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-surface-raised`	`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-focus-ring`	`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-icon-size-sm`	`16px16px16px`	`16px16px16px`
`--bigbang-icon-size-md`	`20px20px20px`	`20px20px20px`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Dolgu seçili seçeneğe kayar	`translate`, `width`	`motion-indicator-duration` (310 ms)	`easing-spring-productive-base`	Anında (1 ms) yer değiştirir.
Basma	`scale` 1 → 0,97	Basınca `motion-press-duration` (70 ms), bırakınca `motion-release-duration` (230 ms)	`motion-press-easing`; bırakırken `easing-spring-productive-fast`	Ölçek 1 kalır.
Renk	`color`, `background-color`	`motion-hover-duration` (110 ms)	`motion-hover-easing`	Değişmez.
İlk çizim	Dolgu yerinde belirir	Yok	Yok	Değişmez.

Dolgunun genişliği yalnızca mutlak konumlu olduğu için animasyonlanır (MOT-02 istisnası). Değerler için Hareket sayfasına bakın.