FDS - コンポーネントガイドライン

Tree

階層構造を持つデータを視覚的に表示するためのUIコンポーネントです。Treeは、親要素と子要素の関係によって形成される階層構造を視覚的に表現し、ユーザーがデータを探索したり操作したりするのに役立ちます。

用途として主にファイルシステム、カテゴリやサブカテゴリの階層、組織図、フォルダとファイルの関係など、階層的なデータを表示する場合に使用されます。

TreeはCheckboxを持つこともでき、親階層を選択することで自動的に子階層もすべて選択され、チェックを外すと子もすべて選択が解除されます。また子階層の一部のみが選択された場合は親階層が一部選択状態の表示となります。

Properties(振る舞いの設定)

Component Propertiesで設定されている内容。

Variables(色の設定)

カラートークン

Style State Element Token
Default Default Label General/Neutral/main
    Container
  Hovered Label General/Neutral/main
    Container General/Primary/light
  Selected Label General/Neutral/main
    Container General/Primary/selected fade
On Colored Default Label General/Neutral/static white
    Container
  Hovered Label General/Neutral/static white
    Container General/Neutral/static black opacity 6
  Selected Label General/Neutral/static white
    Container General/Neutral/static black opacity 25

おすすめの記事

TOP