Tree

枝を開閉できる階層。WAI-ARIA の tree のキーボード操作に従う

インポート

ts
import { Tree } from '@k8ordo/ui';

使い方

項目は { id, label, icon?, children? } の木で渡す。上下で見えている項目を移り、右で枝を開いて最初の子へ、左で枝を閉じて親へ戻る。Home / End、Enter / Space での選択、先頭の文字での移動もできる。

  • src
    • index.ts
  • package.json
  • README.md
tsx
<Tree
  defaultExpandedIds={['src']}
  items={[
    {
      id: 'src',
      label: 'src',
      children: [
        {
          id: 'components',
          label: 'components',
          children: [{ id: 'button', label: 'button.tsx' }],
        },
        { id: 'index', label: 'index.ts' },
      ],
    },
    { id: 'readme', label: 'README.md' },
  ]}
  label="Files"
/>

開いている枝と選択を持つ

開いている枝（expandedIds）と選択（selectedId）は外から渡せる。onChange には選んだ項目の id が届く。

  • src
    • components
      • button.tsx
      • card.tsx
    • index.ts
  • package.json
  • README.md

Selected: card

tsx
const [expandedIds, setExpandedIds] = useState<readonly string[]>(['src']);
const [selectedId, setSelectedId] = useState<string | null>(null);

<Tree
  expandedIds={expandedIds}
  items={files}
  label="Files"
  onChange={setSelectedId}
  onExpandedChange={setExpandedIds}
  selectedId={selectedId}
/>

Props

items
Type: readonly TreeItem[]
Default: -
label
Type: string
Default: -
defaultExpandedIds?
Type: readonly string[]
Default: -
defaultSelectedId?
Type: string|null
Default: null
expandedIds?
Type: readonly string[]
Default: -
onChange?
Type: (id: string) => void
Default: -
onExpandedChange?
Type: (ids: readonly string[]) => void
Default: -
selectedId?
Type: string|null
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLUListElement>

Components