File Tree
記述したドキュメント向けの意味のあるファイルと折りたたみ可能なディレクトリです。
主なプロパティ
TRFileTree は、記述した Markdown の箇条書きを意味のあるファイル一覧に変換します。ネストした箇条書きはディレクトリになり、/ で終わる項目は装飾的なプレースホルダーを持つ空のディレクトリになります。ディレクトリはプラットフォームの details 開閉要素を使い、デフォルトで開いた状態になり、ポインター、Enter、Space のネイティブ操作を維持します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/file-tree.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRFileTree } from '@tinyrack/ui/components/file-tree';長い行はコード領域を横にスクロールして確認できます。
使用方法
例
別の Markdown 箇条書きをネストしてディレクトリを作成します。パスは最後の文字が / の場合だけディレクトリになります。リンク、強調テキスト、コードを含むインライン Markdown は保持され、長いパスは狭いレイアウト内で折り返されます。
API
TRFileTree にコンポーネント固有のスカラープロパティはありません。children には記述した箇条書きを渡し、aria-label、className、style、イベントハンドラー、React 19 の ref を含むネイティブの ul プロパティを転送します。周囲のコンテンツでツリーがラベル付けされていない場合は、aria-label でアクセシブルな名前を指定してください。
表示は --tr-file-tree-background、--tr-file-tree-border、--tr-file-tree-border-width、--tr-file-tree-color、--tr-file-tree-font-family、--tr-file-tree-font-size、--tr-file-tree-gap、--tr-file-tree-indent、--tr-file-tree-margin、--tr-file-tree-marker、--tr-file-tree-padding、--tr-file-tree-placeholder-color、--tr-file-tree-radius で調整できます。各トークンは、対応する Tinyrack のセマンティックトークンにフォールバックします。