Tinyrack

Tree Nav

折りたたみ可能なグループと階層ごとのガイドレールを備えた、汎用の再帰ナビゲーションツリーです。

主なプロパティ

TRTreeNav は任意の深さで入れ子になった折りたたみグループの再帰ナビゲーションツリーをレンダリングします。各階層はガイドレールと段階的なインデントを持ち、アクティブな遷移先に至る分岐のレールが強調されます。リーフのレンダリングは renderLeaf に委譲されるため、ツリーはルーターやドメインに依存しません。

forceOpen を設定するとグループはマウント時に開き、子孫がアクティブになると再び開きます。現在の遷移先の祖先グループに activeBranch を渡すと、そのレールが点灯します。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/tree-nav.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRTreeNav, type TRTreeNavItem } from '@tinyrack/ui/components/tree-nav';

長い行はコード領域を横にスクロールして確認できます。

使用方法

入れ子のガイドツリー パーマリンク

例

TRTreeNav は TRDocsNavigation の背後にあるプリミティブです。ドメインデータを TRTreeNavItem ノードにマッピングし、リーフごとのデータを data に載せ、renderLeaf からリンクを返します。ルーターの状態から forceOpen と activeBranch を計算すると、正しい分岐が開き、そのレールが強調されます。

API

TRTreeNav

プロパティ型既定値用途
itemsreadonly TRTreeNavItem<T>[]必須再帰的なツリーデータです。
renderLeaf(item, state) => ReactNode必須リーフノードをレンダリングします。state に depth が含まれます。
renderGroupLabel(item, state) => ReactNodeグループ label任意のカスタムグループラベルの内容です。
defaultGroupsOpenbooleanfalseアクティブな分岐を含まないグループも開きます。
labelstring'Navigation'ナビゲーションランドマークのアクセシブル名です。

TRTreeNav はネイティブの nav プロパティ、className、style、イベント、data 属性、React 19 の ref も転送します。

TRTreeNavItem

group ノードは key、label、再帰的な children、任意の forceOpen と activeBranch を持ちます。leaf ノードは key と、renderLeaf に渡される汎用の data ペイロードを持ちます。エクスポートされる型は TRTreeNavItem、TRTreeNavGroup、TRTreeNavLeaf、TRTreeNavProps です。

スタイル

core トークンの後に @tinyrack/ui/components/tree-nav.css を読み込みます。--tr-tree-nav-rail-color、--tr-tree-nav-indent を上書きして、ガイドレールと深さのインデントを調整します。