Segmented Control

Görünüm veya mod seçimi için kompakt, birbirini dışlayan kontrol.

SegmentedControl.tsx

Standart Görünüm & Rozetler

Sage Teması & Yuvarlak (Pill) Şekil

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/segmented-control.json

import { SegmentedControl } from "@/components/ui/SegmentedControl"

<SegmentedControl options={views} value={view} onChange={setView} />

Prop	Tür	Varsayılan	Açıklama
options	SegmentedOption[]	—	Etiket, ikon ve sayaç içeren seçenekler.
value	string	—	Kontrollü seçili değer.
onChange	(value: string) => void	—	Seçim callback'i.
size	"sm" \| "md" \| "lg"	"md"	Kontrol ölçeği.
shape	"rounded" \| "pill" \| "square"	"rounded"	Köşe biçimi.
variant	"default" \| "dark" \| "sage"	"default"	Görsel tema.
fullWidth	boolean	false	Kontrolü kapsayıcıya yayar.
ariaLabel	string	"Görünüm seçimi"	Tablist kontrolünün erişilebilir adı.