Tree View

Kontrollü seçim destekleyen genişletilebilir hiyerarşik navigasyon.

TreeView.tsx

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/tree-view.json

Kullanım Örneği

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

<TreeView
  defaultExpandedIds={["components"]}
  nodes={[
    { id: "app", label: "app" },
    { id: "components", label: "components", children: [
      { id: "button", label: "Button.tsx" },
    ] },
  ]}
  onSelectedChange={setSelectedId}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
nodes	TreeNode[]	—	Hiyerarşik düğüm listesi.
selectedId	string	—	Kontrollü seçili düğüm kimliği.
defaultSelectedId	string	—	Kontrolsüz başlangıç seçimi.
onSelectedChange	(id: string) => void	—	Düğüm seçildiğinde çağrılır.
expandedIds	string[]	—	Kontrollü açık dal kimlikleri.
defaultExpandedIds	string[]	—	Başlangıçta açık dallar.
onExpandedChange	(ids: string[]) => void	—	Açık dallar değiştiğinde çağrılır.
ariaLabel	string	"Hiyerarşik görünüm"	Tree bölgesinin erişilebilir adı.