Tree

Dosyalar ve hiyerarşiler için girinti kılavuzları, bağlayıcı çizgiler, basamaklı onay kutuları, typeahead ve tam klavye desteğiyle iç içe, genişletilebilir satırlar.

app

layout.tsx

page.tsxM

globals.css

components

button.tsxM

tree.tsxU

theme-provider.tsx

public

README.md

import {
  IconBrandTypescript,
  IconFileText,
  IconFolder,
  IconFolderOpen,
  IconPhoto,
} from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

function Folder({
  value,
  name,
  children,
}: {
  value: string
  name: string
  children: React.ReactNode
}) {
  return (
    <TreeItem value={value}>
      <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
        {name}
      </TreeItemLabel>
      <TreeGroup>{children}</TreeGroup>
    </TreeItem>
  )
}

function File({
  value,
  name,
  icon = <IconBrandTypescript />,
  status,
}: {
  value: string
  name: string
  icon?: React.ReactNode
  status?: "M" | "U"
}) {
  return (
    <TreeItem value={value}>
      <TreeItemLabel
        icon={icon}
        meta={
          status ? (
            <span
              className={status === "M" ? "text-warning" : "text-success"}
              aria-label={status === "M" ? "Modified" : "Untracked"}
            >
              {status}
            </span>
          ) : null
        }
      >
        {name}
      </TreeItemLabel>
    </TreeItem>
  )
}

export function TreeDemo() {
  return (
    <Tree
      aria-label="Project files"
      defaultExpandedValues={["app", "components", "ui"]}
      defaultSelectedValues={["button"]}
      className="w-full max-w-xs"
    >
      <Folder value="app" name="app">
        <File value="layout" name="layout.tsx" />
        <File value="page" name="page.tsx" status="M" />
        <File value="globals" name="globals.css" icon={<IconFileText />} />
      </Folder>
      <Folder value="components" name="components">
        <Folder value="ui" name="ui">
          <File value="button" name="button.tsx" status="M" />
          <File value="tree" name="tree.tsx" status="U" />
        </Folder>
        <File value="theme" name="theme-provider.tsx" />
      </Folder>
      <Folder value="public" name="public">
        <File value="og" name="og.png" icon={<IconPhoto />} />
      </Folder>
      <File value="readme" name="README.md" icon={<IconFileText />} />
    </Tree>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/tree.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Henüz eklemediyseniz tema token'larını global CSS'inize ekleyin.

Bağımlılıkları yükleyin.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/tree.tsx

"use client"

import * as React from "react"
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { IconChevronRight } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"

components/ui/checkbox.tsx

"use client"

import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group"
import { IconCheck, IconMinus } from "@tabler/icons-react"
import { cn } from "cn"

İçe aktarma yollarını proje yapılandırmanıza uyacak şekilde güncelleyin.

Kullanım

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemLabel,
} from "@/components/ui/tree"

<Tree aria-label="Files" defaultExpandedValues={["src"]}>
  <TreeItem value="src">
    <TreeItemLabel icon={<IconFolder />}>src</TreeItemLabel>
    <TreeGroup>
      <TreeItem value="index">
        <TreeItemLabel icon={<IconFile />}>index.ts</TreeItemLabel>
      </TreeItem>
    </TreeGroup>
  </TreeItem>
</Tree>

<TreeGroup /> içeren bir öğe bir daldır: ok işareti alır, açılıp kapanır ve ok tuşlarına yanıt verir. Her öğenin ağaç içinde benzersiz bir value değeri olmalıdır.

Kompozisyon

Tree
└── TreeItem
    ├── TreeItemLabel
    └── TreeGroup
        └── TreeItem
            └── TreeItemLabel

Örnekler

Girinti kılavuzları

variant="lines" her seviye için bir kılavuz çizer. Seçili veya odaktaki satırı tutan dalın kılavuzu koyulaşır; böylece derin ağaçlarda nerede olduğunuzu görebilirsiniz.

import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

type Node = { name: string; children?: Node[] }

const files: Node[] = [
  {
    name: "packages",
    children: [
      {
        name: "core",
        children: [
          {
            name: "src",
            children: [
              { name: "index.ts" },
              { name: "store.ts" },
              {
                name: "utils",
                children: [{ name: "clamp.ts" }, { name: "debounce.ts" }],
              },
            ],
          },
          { name: "package.json" },
        ],
      },
      {
        name: "react",
        children: [{ name: "index.tsx" }, { name: "package.json" }],
      },
    ],
  },
  { name: "turbo.json" },
]

function renderNodes(nodes: Node[], parent = ""): React.ReactNode {
  return nodes.map((node) => {
    const value = `${parent}/${node.name}`
    return node.children ? (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
          {node.name}
        </TreeItemLabel>
        <TreeGroup>{renderNodes(node.children, value)}</TreeGroup>
      </TreeItem>
    ) : (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconFile />}>{node.name}</TreeItemLabel>
      </TreeItem>
    )
  })
}

export function TreeLines() {
  return (
    <Tree
      aria-label="Monorepo"
      variant="lines"
      defaultExpandedValues={[
        "/packages",
        "/packages/core",
        "/packages/core/src",
        "/packages/core/src/utils",
      ]}
      defaultSelectedValues={["/packages/core/src/utils/clamp.ts"]}
      className="w-full max-w-xs"
    >
      {renderNodes(files)}
    </Tree>
  )
}

Bağlayıcılar

variant="connectors" her öğeyi, bir terminal ağaç listesi gibi, üst öğesine dirsekle bağlar. Sürümler, boyutlar veya sayılar için meta kullanın.

import { IconPackage } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

type Dependency = { name: string; version: string; dependencies?: Dependency[] }

const dependencies: Dependency[] = [
  {
    name: "next",
    version: "16.3.8",
    dependencies: [
      { name: "@next/env", version: "16.3.8" },
      {
        name: "postcss",
        version: "8.5.6",
        dependencies: [
          { name: "nanoid", version: "3.3.11" },
          { name: "picocolors", version: "1.1.1" },
          { name: "source-map-js", version: "1.2.1" },
        ],
      },
      { name: "styled-jsx", version: "5.1.7" },
    ],
  },
  {
    name: "react-dom",
    version: "19.3.0",
    dependencies: [{ name: "scheduler", version: "0.27.0" }],
  },
]

function renderDependencies(items: Dependency[], parent = ""): React.ReactNode {
  return items.map((item) => {
    const value = `${parent}/${item.name}`
    return (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconPackage />} meta={item.version}>
          {item.name}
        </TreeItemLabel>
        {item.dependencies ? (
          <TreeGroup>{renderDependencies(item.dependencies, value)}</TreeGroup>
        ) : null}
      </TreeItem>
    )
  })
}

export function TreeConnectors() {
  return (
    <Tree
      aria-label="Dependencies"
      variant="connectors"
      selectionMode="none"
      defaultExpandedValues={["/next", "/next/postcss", "/react-dom"]}
      className="w-full max-w-xs"
    >
      {renderDependencies(dependencies)}
    </Tree>
  )
}

checkboxes ile bir dalı işaretlemek içindeki her etkin öğeyi işaretler ve kısmen işaretli bir dal tire gösterir. Bir dalı işaretlemek sonradan yükleyeceğiniz alt öğeleri işaretlemek de sayılır. Bir satıra tıklamak onu işaretler, ok işareti açar.

"use client"

import * as React from "react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

const permissions = [
  {
    value: "projects",
    label: "Projects",
    children: [
      { value: "projects.view", label: "View projects" },
      { value: "projects.edit", label: "Edit projects" },
      { value: "projects.delete", label: "Delete projects" },
    ],
  },
  {
    value: "members",
    label: "Members",
    children: [
      { value: "members.invite", label: "Invite members" },
      { value: "members.remove", label: "Remove members" },
    ],
  },
  {
    value: "billing",
    label: "Billing",
    children: [
      { value: "billing.invoices", label: "View invoices" },
      { value: "billing.plan", label: "Change plan", disabled: true },
    ],
  },
]

const leaves = permissions.flatMap((group) => group.children)

export function TreeCheckboxes() {
  const [checked, setChecked] = React.useState<string[]>([
    "projects.view",
    "members.invite",
    "members.remove",
  ])
  const count = leaves.filter((leaf) => checked.includes(leaf.value)).length

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Permissions"
        checkboxes
        checkedValues={checked}
        onCheckedValuesChange={setChecked}
        defaultExpandedValues={["projects", "billing"]}
      >
        {permissions.map((group) => (
          <TreeItem key={group.value} value={group.value}>
            <TreeItemLabel>{group.label}</TreeItemLabel>
            <TreeGroup>
              {group.children.map((permission) => (
                <TreeItem
                  key={permission.value}
                  value={permission.value}
                  disabled={"disabled" in permission}
                >
                  <TreeItemLabel
                    meta={"disabled" in permission ? "Owner only" : null}
                  >
                    {permission.label}
                  </TreeItemLabel>
                </TreeItem>
              ))}
            </TreeGroup>
          </TreeItem>
        ))}
      </Tree>
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {count} of {leaves.length} permissions granted
      </p>
    </div>
  )
}

Satırları render ile bağlantı olarak işleyin. Geçerli sayfayı selectedValues'a verin, bölümünü açın ve satırında aria-current ayarlayın.

import Link from "next/link"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

const sections = [
  {
    value: "getting-started",
    title: "Getting started",
    pages: [{ value: "installation", title: "Installation" }],
  },
  {
    value: "components",
    title: "Components",
    pages: [
      { value: "accordion", title: "Accordion" },
      { value: "collapsible", title: "Collapsible" },
      { value: "tabs", title: "Tabs" },
      { value: "tree", title: "Tree" },
    ],
  },
]

const current = "tree"

export function TreeNavigation() {
  return (
    <nav aria-label="Docs" className="w-full max-w-60">
      <Tree
        aria-label="Docs pages"
        size="sm"
        selectedValues={[current]}
        defaultExpandedValues={["components"]}
      >
        {sections.map((section) => (
          <TreeItem key={section.value} value={section.value}>
            <TreeItemLabel>{section.title}</TreeItemLabel>
            <TreeGroup>
              {section.pages.map((page) => (
                <TreeItem key={page.value} value={page.value}>
                  <TreeItemLabel
                    render={<Link href={`/docs/${page.value}`} />}
                    aria-current={page.value === current ? "page" : undefined}
                  >
                    {page.title}
                  </TreeItemLabel>
                </TreeItem>
              ))}
            </TreeGroup>
          </TreeItem>
        ))}
      </Tree>
    </nav>
  )
}

Çoklu seçim

selectionMode="multiple" bir dosya yöneticisi gibi çalışır: tek satır seçmek için tıklayın, birini eklemek veya kaldırmak için Cmd/Ctrl+tıklayın, aralık seçmek için Shift+tıklayın. Dokunmatik ekranlarda dokunuş satırı ekler veya kaldırır.

"use client"

import * as React from "react"
import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

const photos = ["beach.jpg", "city.jpg", "forest.jpg", "mountains.jpg"]
const documents = ["invoice.pdf", "notes.md", "resume.pdf"]

export function TreeMultiple() {
  const [selected, setSelected] = React.useState<string[]>(["city.jpg"])

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Library"
        selectionMode="multiple"
        selectedValues={selected}
        onSelectedValuesChange={setSelected}
        defaultExpandedValues={["photos", "documents"]}
      >
        <TreeItem value="photos">
          <TreeItemLabel
            icon={<IconFolder />}
            expandedIcon={<IconFolderOpen />}
          >
            Photos
          </TreeItemLabel>
          <TreeGroup>
            {photos.map((name) => (
              <TreeItem key={name} value={name}>
                <TreeItemLabel icon={<IconFile />}>{name}</TreeItemLabel>
              </TreeItem>
            ))}
          </TreeGroup>
        </TreeItem>
        <TreeItem value="documents">
          <TreeItemLabel
            icon={<IconFolder />}
            expandedIcon={<IconFolderOpen />}
          >
            Documents
          </TreeItemLabel>
          <TreeGroup>
            {documents.map((name) => (
              <TreeItem key={name} value={name}>
                <TreeItemLabel icon={<IconFile />}>{name}</TreeItemLabel>
              </TreeItem>
            ))}
          </TreeGroup>
        </TreeItem>
      </Tree>
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {selected.length === 0
          ? "Nothing selected"
          : `${selected.length} selected`}
      </p>
    </div>
  )
}

Kontrollü

Açık dalları expandedValues ve onExpandedValuesChange ile kendi durumunuzda tutun. Bu örnek ağacı ayrıca özyinelemeli bir fonksiyonla veriden oluşturur.

"use client"

import * as React from "react"
import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

type Node = { id: string; name: string; children?: Node[] }

const nodes: Node[] = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "hooks",
        name: "hooks",
        children: [
          { id: "use-media", name: "use-media.ts" },
          { id: "use-copy", name: "use-copy.ts" },
        ],
      },
      { id: "main", name: "main.tsx" },
    ],
  },
  {
    id: "tests",
    name: "tests",
    children: [{ id: "smoke", name: "smoke.test.ts" }],
  },
]

function branchIds(items: Node[]): string[] {
  return items.flatMap((item) =>
    item.children ? [item.id, ...branchIds(item.children)] : []
  )
}

function renderNodes(items: Node[]): React.ReactNode {
  return items.map((item) =>
    item.children ? (
      <TreeItem key={item.id} value={item.id}>
        <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
          {item.name}
        </TreeItemLabel>
        <TreeGroup>{renderNodes(item.children)}</TreeGroup>
      </TreeItem>
    ) : (
      <TreeItem key={item.id} value={item.id}>
        <TreeItemLabel icon={<IconFile />}>{item.name}</TreeItemLabel>
      </TreeItem>
    )
  )
}

export function TreeControlled() {
  const [expanded, setExpanded] = React.useState<string[]>(["src"])
  const [selected, setSelected] = React.useState<string[]>([])

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setExpanded(branchIds(nodes))}
        >
          Expand all
        </Button>
        <Button variant="outline" size="sm" onClick={() => setExpanded([])}>
          Collapse all
        </Button>
      </div>
      <Tree
        aria-label="Source"
        expandedValues={expanded}
        onExpandedValuesChange={setExpanded}
        selectedValues={selected}
        onSelectedValuesChange={setSelected}
      >
        {renderNodes(nodes)}
      </Tree>
      <p className="text-sm text-muted-foreground">
        Selected: {selected[0] ?? "none"}
      </p>
    </div>
  )
}

Tembel yükleme

Alt öğeleri <TreeItem /> üzerindeki onExpandedChange içinde getirin. Gelene kadar devre dışı bir yükleniyor satırı işleyin; böylece dal ok işaretini korur.

"use client"

import * as React from "react"
import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Spinner } from "@/components/ui/spinner"
import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

function listFiles(folder: string) {
  return new Promise<string[]>((resolve) =>
    setTimeout(
      () => resolve([`${folder}-1.log`, `${folder}-2.log`, `${folder}-3.log`]),
      900
    )
  )
}

function RemoteFolder({ name }: { name: string }) {
  const [files, setFiles] = React.useState<string[] | null>(null)
  const loading = React.useRef(false)

  return (
    <TreeItem
      value={name}
      onExpandedChange={(expanded) => {
        if (expanded && files === null && !loading.current) {
          loading.current = true
          listFiles(name).then(setFiles)
        }
      }}
    >
      <TreeItemLabel icon={<IconFolder />} expandedIcon={<IconFolderOpen />}>
        {name}
      </TreeItemLabel>
      <TreeGroup aria-busy={files === null}>
        {files === null ? (
          <TreeItem value={`${name}/loading`} disabled>
            <TreeItemLabel icon={<Spinner size="sm" label="Loading files" />}>
              Loading…
            </TreeItemLabel>
          </TreeItem>
        ) : (
          files.map((file) => (
            <TreeItem key={file} value={`${name}/${file}`}>
              <TreeItemLabel icon={<IconFile />}>{file}</TreeItemLabel>
            </TreeItem>
          ))
        )}
      </TreeGroup>
    </TreeItem>
  )
}

export function TreeLazy() {
  return (
    <Tree aria-label="Server logs" className="w-full max-w-xs">
      <RemoteFolder name="api" />
      <RemoteFolder name="worker" />
      <RemoteFolder name="cron" />
    </Tree>
  )
}

Küçük

size="sm" kenar çubukları için daha kısa satırlar ve daha dar girintiler kullanır. Satırlar her iki boyutta da dokunmatik ekranlarda büyür.

import { IconHash, IconVolume } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

export function TreeSmall() {
  return (
    <Tree
      aria-label="Channels"
      size="sm"
      defaultExpandedValues={["text", "voice"]}
      defaultSelectedValues={["general"]}
      className="w-full max-w-56"
    >
      <TreeItem value="text">
        <TreeItemLabel>Text channels</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="general">
            <TreeItemLabel icon={<IconHash />} meta="12">
              general
            </TreeItemLabel>
          </TreeItem>
          <TreeItem value="design">
            <TreeItemLabel icon={<IconHash />}>design</TreeItemLabel>
          </TreeItem>
          <TreeItem value="releases">
            <TreeItemLabel icon={<IconHash />} meta="3">
              releases
            </TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
      <TreeItem value="voice">
        <TreeItemLabel>Voice channels</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="lounge">
            <TreeItemLabel icon={<IconVolume />}>Lounge</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </Tree>
  )
}

Devre dışı

Devre dışı bir öğe seçilemez, işaretlenemez veya açılamaz ve ok tuşları onu atlar. Devre dışı bir dalın içindeki öğeler de devre dışıdır.

import { IconFile, IconFolder, IconLock } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

export function TreeDisabled() {
  return (
    <Tree
      aria-label="Shared drive"
      defaultExpandedValues={["team"]}
      className="w-full max-w-xs"
    >
      <TreeItem value="team">
        <TreeItemLabel icon={<IconFolder />}>Team</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="roadmap">
            <TreeItemLabel icon={<IconFile />}>roadmap.md</TreeItemLabel>
          </TreeItem>
          <TreeItem value="salaries" disabled>
            <TreeItemLabel icon={<IconLock />}>salaries.xlsx</TreeItemLabel>
          </TreeItem>
          <TreeItem value="notes">
            <TreeItemLabel icon={<IconFile />}>notes.md</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
      <TreeItem value="archive" disabled>
        <TreeItemLabel icon={<IconLock />}>Archive</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="2024">
            <TreeItemLabel icon={<IconFile />}>2024.zip</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </Tree>
  )
}

Uzun adlar

Adlar üç noktayla kesilir ve meta görünür kalır. Tam adı hover'da göstermek için title verin.

import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

const longFolder = "quarterly-financial-reports-and-board-presentations"
const longFile = "2026-q3-consolidated-revenue-forecast-final-v12-approved.xlsx"
const unbroken = "averyveryverylongfilenamewithoutanyspacesoranybreaks.txt"

export function TreeLongNames() {
  return (
    <Tree
      aria-label="Reports"
      variant="lines"
      defaultExpandedValues={["reports"]}
      className="w-full max-w-56"
    >
      <TreeItem value="reports">
        <TreeItemLabel
          icon={<IconFolder />}
          expandedIcon={<IconFolderOpen />}
          title={longFolder}
        >
          {longFolder}
        </TreeItemLabel>
        <TreeGroup>
          <TreeItem value="forecast">
            <TreeItemLabel icon={<IconFile />} meta="2.4 MB" title={longFile}>
              {longFile}
            </TreeItemLabel>
          </TreeItem>
          <TreeItem value="unbroken">
            <TreeItemLabel icon={<IconFile />} title={unbroken}>
              {unbroken}
            </TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </Tree>
  )
}

Sağdan sola

Girintiler, bağlayıcılar ve ok işaretleri yansıtılır; sol ve sağ ok tuşları yer değiştirir.

import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

export function TreeRtl() {
  return (
    <div dir="rtl" className="w-full max-w-xs">
      <Tree
        aria-label="المستندات"
        variant="connectors"
        defaultExpandedValues={["docs", "invoices"]}
        defaultSelectedValues={["march"]}
      >
        <TreeItem value="docs">
          <TreeItemLabel
            icon={<IconFolder />}
            expandedIcon={<IconFolderOpen />}
          >
            المستندات
          </TreeItemLabel>
          <TreeGroup>
            <TreeItem value="invoices">
              <TreeItemLabel
                icon={<IconFolder />}
                expandedIcon={<IconFolderOpen />}
              >
                الفواتير
              </TreeItemLabel>
              <TreeGroup>
                <TreeItem value="march">
                  <TreeItemLabel icon={<IconFile />} meta="١٢٠ ك.ب">
                    مارس.pdf
                  </TreeItemLabel>
                </TreeItem>
                <TreeItem value="april">
                  <TreeItemLabel icon={<IconFile />}>أبريل.pdf</TreeItemLabel>
                </TreeItem>
              </TreeGroup>
            </TreeItem>
            <TreeItem value="contract">
              <TreeItemLabel icon={<IconFile />}>العقد.docx</TreeItemLabel>
            </TreeItem>
          </TreeGroup>
        </TreeItem>
        <TreeItem value="notes">
          <TreeItemLabel icon={<IconFile />}>ملاحظات.txt</TreeItemLabel>
        </TreeItem>
      </Tree>
    </div>
  )
}

Klavye

Tuş	Action
`↓`	Odağı sonraki görünen satıra taşır.
`↑`	Odağı önceki görünen satıra taşır.
`→`	Kapalı bir dalı açar. Açık bir dalda odağı ilk alt öğesine taşır.
`←`	Açık bir dalı kapatır. Aksi halde odağı üst öğeye taşır.
`Home`	Odağı ilk satıra taşır.
`End`	Odağı son görünen satıra taşır.
`Enter`	Satırı seçer ve dalsa açar veya kapatır. Bağlantı satırlarında bağlantıyı izler.
`Space`	Satırı seçer, çoklu modda ekler veya kaldırır ya da onay kutularıyla işaretler.
`Shift + ↑Shift + ↓`	Çoklu modda seçimi genişletir.
`Cmd/Ctrl + A`	Çoklu modda her görünen satırı seçer.
`*`	Odaktaki satırın seviyesindeki her dalı açar.
`a–z`	Odağı adı yazılan harflerle başlayan sonraki satıra taşır.

Erişilebilirlik

Ağaç WAI-ARIA tree view kalıbını izler. Her satır treeitem'dır ve grubuna aria-owns ile sahip olur; böylece bir satırın adı yalnızca kendi etiketidir ve bağlantı satırları gerçek bağlantı olarak çalışır. Sekme sırasında aynı anda yalnızca bir satır bulunur. Odaktaki satırın çevresindeki bir dal kapanırsa odak kaybolmak yerine o dala taşınır.

Kapalı gruplar sayfada kalır; böylece tarayıcının sayfada bul özelliği bir eşleşmenin çevresindeki klasörleri açar ve bir dalı işaretlemek içindeki her öğeyi görür. Ağaca bir aria-label verin.

API referansı

Dallar Base UI collapsible ile açılıp kapanır. <TreeItem /> ve <TreeGroup /> sardıkları parçaların prop'larını kabul eder.

Tree

Prop	Tür	Varsayılan
`variant`	`"default" \| "lines" \| "connectors"`	`"default"`
`size`	`"default" \| "sm"`	`"default"`
`selectionMode`	`"none" \| "single" \| "multiple"`	`"single"`
`selectedValues`	`string[]`	`–`
`defaultSelectedValues`	`string[]`	`–`
`onSelectedValuesChange`	`(values: string[]) => void`	`–`
`expandedValues`	`string[]`	`–`
`defaultExpandedValues`	`string[]`	`–`
`onExpandedValuesChange`	`(values: string[]) => void`	`–`
`checkboxes`Basamaklı onay kutularını gösterir. Satırlar seçilmek yerine işaretlenir.	`boolean`	`false`
`checkedValues`İşaretli öğeler. Listedeki bir dal, alt öğelerinin işaretlenmesi sayılır.	`string[]`	`–`
`defaultCheckedValues`	`string[]`	`–`
`onCheckedValuesChange`İşaretli her yaprak ve tamamen işaretli her dalla çağrılır.	`(values: string[]) => void`	`–`
`disabled`	`boolean`	`false`
`hiddenUntilFound`Sayfada bul özelliğinin bir eşleşmenin çevresindeki kapalı dalları açmasına izin verir.	`boolean`	`true`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="tree"`	CSS'te kökü hedefleyin.
`data-variant`	Geçerli varyant.
`data-size`	Geçerli boyut.
`--tree-row-height`	Satır yüksekliği. Dokunmatik ekranlarda daha büyük.
`--tree-indent`	Her seviyenin ne kadar girintileneceği.

TreeItem

Prop	Tür	Varsayılan
`value`Zorunlu. Ağaç içinde benzersiz.	`string`	`–`
`disabled`	`boolean`	`false`
`onExpandedChange`Bu öğe açıldığında veya kapandığında çağrılır.	`(expanded: boolean) => void`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="tree-item"`	CSS'te öğeleri hedefleyin.
`data-open`	Öğe açık olduğunda bulunur.
`data-disabled`	Öğe devre dışıyken bulunur.

TreeItemLabel

Prop	Tür	Varsayılan
`icon`Etiketten önce gösterilir.	`ReactNode`	`–`
`expandedIcon`Dal açıkken icon için çapraz solarak girer.	`ReactNode`	`–`
`meta`Satırın sonunda gösterilir; boyut, sayı veya durum gibi.	`ReactNode`	`–`
`className`	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="tree-item-label"`	CSS'te satırları hedefler.
`data-value`	Öğenin değeri.
`data-expanded`	Dal açıkken bulunur.
`data-selected`	Satır seçiliyken bulunur.
`data-checked`	Satır işaretliyken bulunur.
`data-indeterminate`	Yalnızca bazı alt öğeler işaretliyken bulunur.
`data-disabled`	Öğe devre dışıyken bulunur.

TreeGroup

Prop	Tür	Varsayılan
`className`İç sarmalayıcıya uygulanır; böylece dolgu hiçbir zaman yükseklik animasyonuyla çakışmaz.	`string`	`–`

Öznitelik	Açıklama
`data-slot="tree-group"`	CSS'te grupları hedefleyin.
`data-open`	Grup açıkken bulunur.
`data-starting-style`	Grup animasyonla girerken bulunur.
`data-ending-style`	Grup animasyonla çıkarken bulunur.
`--collapsible-panel-height`	Grubun ölçülen yüksekliği; yükseklik animasyonu için kullanılır.

Kullanıldığı bloklar

Tree üzerine kurulan bloklar.

Tree

Kurulum

Kullanım

Kompozisyon

Örnekler

Girinti kılavuzları

Bağlayıcılar

Onay kutuları

Gezinti

Çoklu seçim

Kontrollü

Tembel yükleme

Küçük

Devre dışı

Uzun adlar

Sağdan sola

Klavye

Erişilebilirlik

API referansı

Tree

TreeItem

TreeItemLabel

TreeGroup

Kullanıldığı bloklar