Tree (ツリー)

ツリーコンポーネントは、カテゴリ間の階層関係を視覚的に表現するために使用され、リスト構造で表示されます。 Tree コンポーネントは、Ignite UI for Angular Tree コンポーネントと視覚的に同一です。

Tree のデモ

Tree の密度

Tree コンポーネントは、Comfort、Cozy、Compact の 3 つの表示密度をサポートします。Figma では、プロパティパネルから「Display Density」プロパティの値を変更することで 3 つを切り替えることができますが、Sketch では、シンボルを挿入する前に表示密度を選択する必要があります。

Tree の種類

次の 2 種類の Tree コンポーネントをサポートしています。Basic (基本) と展開アイコンの後にチェックボックスコンポーネントがある　Checkbox (チェックボックス) です。Figma では、プロパティパネルから「Checkbox」ブール値プロパティを使用して 2 つのタイプを切り替えることができますが、Sketch では、表示密度を選択した後、シンボルを挿入する前にタイプを選択する必要があります。

Tree Node (ツリーノード) 構造

Tree コンポーネントは、ツリーノードと呼ばれる多数のネストされたコンポーネントから構築されます。各ノードは展開アイコンとテキストで構成されます。チェックボックス種類を選択した場合は、展開アイコンの後にチェックボックスコンポーネントも表示されます。

各ノードのテキストは、通常のテキストからハイパーリンクテキストに切り替えることができます。Figma では、プロパティパネルの「Hyperlink Text」プロパティを使用して 3 つを切り替えることができますが、Sketch ではこれは Symbol Overrides で実現されます。

また、展開アイコンの 2 つの状態 (縮小または展開した状態) もサポートされています。Figma では、プロパティパネルの「Expand Icon」プロパティを使用して 3 つを切り替えることができますが、Sketch ではこれは Symbol Overrides で実現されます。

Tree Node (ツリーノード) レベル

ノード間の階層関係を表すために、ツリーノードは　Root、Child、Grandchild　の 3 つのレベル種類をサポートします。Figma では、プロパティパネルの「Level」プロパティを使用して別のレベルに切り替えることができますが、Sketch ではこれは Symbol Overrides　を使用して実現されます。

Tree Node (ツリーノード) 状態

Tree Node　には、Idle と Disabled という 2 つの主な状態があります。さまざまなインタラクション状態から選択することもできます。Figma では、これはプロパティパネルから「State」プロパティの値を変更することで実現できますが、Sketch では Symbol Overrides　を使用して実現されます。

Tree のプリセット

基本的な Tree コンポーネントに加えて、Active (アクティブ)、Cascading Selection (カスケード選択)、Multiple Selection (複数選択) の 3 つのツリープリセットから選択することもできます。これらにより、デザインの構築がより簡単かつ迅速になります。Figma では、これらは個別のコンポーネントであり、ツリーコンポーネントと同じページに配置されており、[アセット] パネルまたは [リソース] パネルから挿入できます。Sketch では、これらは Tree フォルダーの下の「Presets」という別のグループにあります。