Accordion

Tekli veya çoklu seçim destekleyen açılıp kapanabilir içerik grupları.

Accordion.tsx

Tasarım sistemi HSL ve HEX tabanlı renk token'ları ile çalışır. İstediğiniz temayı globals.css içindeki CSS değişkenleriyle kolayca özelleştirebilirsiniz.

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/accordion.json

Kullanım Örneği

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

<Accordion
  variant="separated"
  size="md"
  allowMultiple
  items={[
    {
      id: "item-1",
      title: "Başlık 1",
      subtitle: "Alt açıklama",
      content: "Akordeon içeriği burada yer alır.",
    },
    {
      id: "item-2",
      title: "Başlık 2",
      content: "İkinci bölüm detayları.",
    },
  ]}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
items	AccordionItem[]	—	Başlık, alt başlık, rozet, ikon ve içerik barındıran akordeon öğeleri.
variant	"card" \| "separated" \| "flush" \| "filled" \| "ghost"	"card"	Görsel kart ve kenarlık stili.
size	"sm" \| "md" \| "lg"	"md"	İç boşluk ve başlık boyutu.
allowMultiple	boolean	false	Aynı anda birden fazla öğenin açılmasına izin verir.
chevronPosition	"left" \| "right"	"right"	Açma/kapama okunun konumu.
renderChevron	(isOpen: boolean) => ReactNode	—	Özel tetikleyici ikon bileşeni.
value	string[]	—	Kontrollü modda açık olan öğe ID'leri dizisi.
onValueChange	(openIds: string[]) => void	—	Açık öğeler değiştiğinde çağrılan geri çağırma.
defaultOpenIds	string[]	—	İlk açılışta açık gelecek öğe ID'leri.