Bileşenler
Segment
Yan yana duran iki ya da üç seçenekten birini seçtirir; örneğin bir görünüm ya da zaman aralığı. Bu sayfadaki Tasarımcı / Geliştirici geçişi bir Segment’tir.
Playground
Figma varyantı
Segment
👕 Size=Medium
Count=3
Fluid=False
Form Spacing=False
Disable=False
.Segment Item
Type=DefaultÖğe tipleri
Bir öğe metin, iki yanından birinde ikonlu metin, sayı badge’li metin ya da küçük bilgi ikonlu metin olabilir.
Boyutlar ve genişlik
Medium ve Small. Fluid segmenti uzatır ve genişliği öğeler arasında paylaştırır.
| Size | Height | Track padding | Item padding | Radius | Text | Icon |
|---|---|---|---|---|---|---|
| medium | 40px | --space-micro | --space-micro --space-small | --radius-form-element | ui/text/regular | 16px |
| small | 32px | --space-micro | --space-micro --space-tiny | --radius-form-element-small | ui/text small/regular | 12px |
Durumlar
Seçili öğe, primary metinli, yükseltilmiş surface/level-1 bir haptır. Disabled zemini ve metni griye çevirir.
Tokenlar
| Part | Token |
|---|---|
| Track | --color-surface-level-3 |
| Chosen item | --color-surface-level-1, --shadow-card-style-1 |
| Chosen text | --color-primary |
| Text | --color-foreground-high-emphasis |
| Disabled track | --color-surface-level-2, --color-surface-level-4 line |
| Disabled text | --color-foreground-low-emphasis |
Figma notları
- Fluid segmentlerin köşesi iki boyutta da ham 8px, diğerleri form element köşesini (Medium 12px, Small 8px) kullanıyor; kod boyutun köşesini kullanır.
- Disabled aktif öğeler ikon, info ve badge tiplerinde primary metni koruyor ama default tipte korumuyor; kod hepsinde low-emphasis metin kullanır.
- Figma’da hover ya da focus durumu yok; kod klavye kullanıcıları için primary focus halkasını ekler.
- Medium Info öğelerde metin ile 12px ikon arasında 8px, Small Info öğelerde 4px ve 8px ikon var.
Figma’dan koda
| Figma | React |
|---|---|
| 👕 Size = Medium / Small | size='medium' / 'small' |
| Count = 2 / 3 | options.length |
| Fluid / Disable / Form Spacing | fluid / disabled / spacing |
| .Segment Item Type = Left Icon / Right Icon | { icon, iconPosition: 'start' | 'end' } |
| .Segment Item Type = Badge / Info | { badge } / { info: true } |
| .Segment Item Active = True | value |