Tree Grid (ツリーグリッド)

Tree Grid コンポーネントを使用して、ユーザーがタブレイアウトで表示される大量の階層なデータをブラウズおよびインタラクティブに操作できるようにしす。Grid で利用可能な機能もサポートします。Tree Grid は、Ignite UI for Angular Tree Grid コンポーネントと視覚的に同じものです。

Tree Grid のデモ

Figma と Sketch で Tree Grid を使用

グリッドと同様に、ツリーグリッドは基本的に、階層データをフラットな表形式のレイアウトで表示する列と行のリピーターです。Figma では、Grid/Tree Grid (Sketch では Tree Grid/Comfortable) コンポーネントをフレーム (Sketch ではアートボード) にドラッグすることで簡単に使用できます。より多くの列と行を持つ Tree Grid を設計するには、コンテキストメニューの下部にある Detach Instance (Sketch では Detach from Symbol) オプションを選択して、コンポーネントをデタッチする必要があります。レイヤーパネルには、以下が表示されます。

レイヤー	使用
🚫 componentVersion	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください
Column 1	Header コンポーネントに関連するすべての要素を含みます。
...	Column 1 と Column 7 の間の列。
Column 7	Header コンポーネントに関連するすべての要素を含みます。

デタッチ後、既存の列を複製することにより、Tree Grid 内の列の数を増やすことができます。本文セルの数を増やすには、最初に特定の列に対して Detach instance オプションを使用する必要があります。そうすると、以下が表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Header	Header コンポーネントに関連するすべての要素を含みます。
Body Cell 1	本体のすべてのセルを含みます。
...	Body Cell 1 と Body Cell 9 の間の列
Body Cell 9	本体のすべてのセルを含みます。

次に、列内に既に存在する本文セルのいずれかを複製します。列またはセルの数を増減した後、Tree Grid コンポーネントのサイズを手動で調整する必要があります。

Adobe XD で Tree Grid を使用

Adobe XD では、3 つのプリセット表示密度ツリーグリッドコンポーネントのいずれかを選択してアートボードにドラッグすると、レイヤーパネルで、Header と Body の両方に Repeat Grid を使用して構成を高速化していることがわかります。Sketch とは異なり、Adobe XD ではシンボルを破棄する必要はありません。レイヤーパネルに次のように表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
Header	すべてのヘッダーセルが含まれます: 本文セルと Repeat Grid にグループ化された残りのセル。
Body	すべての本文セルが含まれます: Repeat Grid にグループ化された TreeColumn セルと、別の Repeat Grid にグループ化された残りのセル。

Repeat Grid レイヤーを選択すると、必要な繰り返すセルの数を変更できます。右端または下端にある緑色のハンドルをドラッグするだけで、データのすべてのディメンションが表示され、デザインに表示する必要のある数の表示可能なレコードが挿入されます。特定のセルタイプまたは列幅を変更するには、Repeat Grid レイヤーを選択し、右側のパネルで Ungroup Grid をクリックする必要があります。これにより、セルを個別に操作して、目的のデザインを実現できます。

セルタイプ

Tree Grid は、3 種類の通常のグリッドセル Header、Body および Summary を、階層を整理するために使用される TreeColumn Cell で拡張します。これは常にすべての行の最初の Body Cell として使用され、行を折りたたむ/展開するための定義済みのアイコンとアクションが付属しています。

通常の Header、Body、Summary セルをさまざまなタイプのデータに使用し、さまざまな Tree Grid 機能を有効にするように構成する方法を理解するには、Grid トピックを参照してください。

セル表示密度

TreeColumn セルは、Tree Grid の 3 つの表示密度バリアント (Comfortable、Cosy、Compact) をサポートします。

Cell の深さ

Tree Grid の TreeColumn セルは、Level プロパティ (オーバーライド) を介してデータ階層のレベルを視覚的に示します。これは、Root Level (ルートレベル)、Child Level (子レベル)、または Grandchild Level (孫レベル) に設定できます。Figma では、Column 1 から Cell を選択し、レイヤーパネルでそのセル内の Level ベースコンポーネントに移動すると、Level プロパティを使用してそれらを切り替えることができます。Sketch では、これは Symbol Overrides で実現できます。Adobe XD では、Component States パラダイムを使用しています。