Grid (グリッド)

    Grid コンポーネントは複雑で大規模なデータを表形式のレイアウトで表示し、ユーザーがブラウジングやインタラクティブに操作することにより、フィルタリング、並べ替え、ページングなどが可能です。Grid は、Ignite UI for Angular Grid コンポーネントと視覚的に同じものです。

    Grid のデモ

    Figma で Grid を使用

    Grid は、基本的に表形式のレイアウトでデータを表示する列と行のリピーターです。したがって、最も簡単な使用方法は、定義済みのグリッドの 1 つをフレームにドラッグすることです。サポートされる 3 つの表示密度 に 3 つのプリセットがあります。Figma では、Grid コンポーネントは列に基づいた構造を持っていることに注意してください。つまり、行全体ではなく、列全体を即座に削除または非表示にすることができます。グリッドを挿入したら、ヘッダーと本文セルの編集を開始したり、グリッド全体の幅のサイズを変更したりできます。ただし、グリッド構造をさらに調整したい場合 (列または行の削除、列の幅の変更など) は、グリッドを右クリックし、コンテキスト メニューの下部近くにある Detach instance オプションを使用する必要があります。事前にデタッチしなくても、レイヤー パネルのコンポーネント名の下に次の構造が表示されます。

    レイヤー 使用
    🚫 componentVersion    禁止されたアイコンで開始する特定のロックされたレイヤー。禁止されたアイコンで開始する特定のロックされたレイヤー。この層はコード生成に必要であり、コンポーネントのバージョンに関する情報を保持します。削除や変更は避けてください。
    🚫 metadata 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
    Column (数字) 特定の列内の Header と Body セルを含みます。
    Header 特定のヘッダー セルを含みます。
    Body (数字) 特定の本文セルを含みます。

    デタッチ後、既存の列を複製することにより、グリッド内の列の数を増やすことができます。本文セルの数を増やすには、まず特定の列で Detach instance オプションを使用してから、列内にすでに存在する本文セルを複製する必要があります。列またはセルの数を増減した後、Grid コンポーネントのサイズを手動で調整する必要があります。

    Sketch で Grid を使用

    Sketch でグリッド コンポーネントを使用するには、定義済みのグリッドの 1 つをアートボードにドラッグすることです。サポートされる 3 つの表示密度に 3 つのプリセットがあります。アートボードを開いた後、その上を右クリックし、コンテキスト メニューの下部にある Detach from Symbol オプションを選択すると、新しく表示されたグループの下のレイヤー パネルに次のように表示されます。

    レイヤー 使用
    🚫 metadata 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください
    Column (数字) 特定の列内の Header と Body セルを含みます。
    Header ヘッダーのすべてのセルを取得します。
    Body (数字) 特定の本文セルを含みます。

    デタッチ後、既存のデータ行の 1 つを複製するだけで、データのすべてのディメンションを表示するために必要なヘッダーの数を変更できます。デザインに表示したい表示レコード (数に制限がない) を挿入することもできます。

    Adobe XD で Grid を使用

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

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

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

    セル タイプ

    Grid は、異なるデータ可視化用に 3 タイプのセルがあります。Header Cell は、各列に 1 つ、Grid の一番上に表示され、特定の列のデータに関する説明をテキストで表示します。Body Cell は、データ レコードを表示するコンテンツ テーブルのビルドを作成するために使用され、そのタイプは異なる場合があります。Summary Cell は、集計列がカウント、最大、最小などの各ディメンションに表示される Grid の下のセクションを作成するために使用されます。

    Header Cell には、Row Filter Header Cell という特別なサブタイプが 1 つあります。Row Filter Header Cell を使用して、行フィルター機能を有効にするために Header の下部に追加のヘッダー行を作成します。

    セル表示密度

    Header、Body、および Summary Cell は、Grid コンポーネントの表示密度に応じて 3 つの表示密度バリアントをサポートしています: Comfortable、Cosy、および Compact。Sketch では、それぞれに個別のシンボルが付いていますが、Figma では、セルの密度と内部のコンテンツはプロパティ パネルから個別に変更できるプロパティです。

    Note

    特定の密度の Grid コンポーネントを選択した後は、グリッド セルの表示密度を変更しないことをお勧めします。

    項目と機能 (ヘッダー セル)

    Grid Header Cell は、Items のオーバーライドでさまざまなレイアウト/インスタンスの組み合わせをサポートします。また、Feature Left および Feature Right のオーバーライド/インスタンスを介して機能の複数の構成をサポートします。さらに、編集、移動、サイズ変更、非表示、ピン固定など、セルを視覚的に変更しないがグリッドの異なる列機能を有効にする追加のオーバーライド/インスタンスがあります。

    状態と Grid 機能 (本文セル)

    Grid Body Cell は、以下のインタラクティブな状態をサポートします: 標準状態の Inactive、Focused/Selected セルでは Active です。任意の時間に、グリッド内の 1 つのセルだけをアクティブにすることができます。

    Grid Body Cell は、Grid Feature を介してヘッダーで定義された一部の Grid 機能のスタイル設定をサポートしています。通常のセル、編集可能なセル、および選択した行に属するセルには、スタイルのバリアントがあります。Figma では、さまざまな体細胞の状態間の切り替えは、プロパティ パネルの 「State」 プロパティを通じて実現されます。Sketch では、Grid Feature を切り替えるには、使用可能な Symbol Overrides を使用する必要がありますが、Adobe XD では、Component States の一致するリストがあります。

    セル タイプ

    Sketch と Figma では、Grid Header Cell は、グリッドが対応する必要があるデータの種類に対して 5 つのプリセットを提供します。数値の Number、それぞれのデータ タイプの Text,Date,Bool (テキスト、日付、ブール) を組み合わせたもの; 複数の行を選択する場合に最初の列に使用される Row Selection; グループ化されたデータ行を展開および縮小するために使用される Group By; ユーザーが本文セル内のコンテンツに関連する特定のフィルター オプションをアクティブ化できる場所で使用される Row Filter です。Figma には、Row Filter の 2 つのオプションがあります - Empty (空) または Filled (塗りつぶし)。Adobe XD では、3 つのタイプがあります。Data に標準のもの、Row Selection、Group By の標準タイプで、標準のタイプは Component States を介した Numeric 値と Text,Date,Bool 値の選択をサポートしています。

    Grid Body Cell には、単純なグラフィックスを視覚化する追加のアイコン タイプと、空の本文セルを表示するために使用されるスペーサー タイプを備えた Header Cell のような、同じ汎用タイプのデータのプリセットが提供されます。

    Grid の水平スクロール

    Figma で水平スクロールを実現するには、実際のグリッド幅より小さいサイズでフレーム内に Grid を追加し、プロパティ パネルからクリッピング オプションを有効にする必要があります。次に、プロパティ パネルの上部にある Prototype タブに移動し、スクロールを水平に設定する必要があります。同じ結果を達成するためのもう 1 つのオプションは、グリッド コンポーネントをデタッチすることです。その後、フレーム サイズを縮小し、プロパティ パネルからクリッピング オプションを有効にする必要があります。Sketch と Adobe XD では、絶対幅として、または親グループ/コンテナに関連する特定のグリッド 寸法を達成する 1 つの方法は、グリッドのメイン グループ内にマスクを追加することです。スタイル設定なしで長方形を挿入し、必要に応じてそのサイズを設定します。下の画像では、常に正確に 800px 幅のグリッドがあります。

    長方形の幅と高さを固定し、名前を Mask に変更し、レイヤー パネルの下部に配置します。次に、長方形の上を右クリックし、コンテキスト メニューの下部にある Mask オプションを選択します。

    これで Grid のグループが Mask のディメンションを取得し、水平スクロールなしで Grid を使用することと同じ方法でレイアウトで使用できます。このコンポーネントのコードが生成されると、Grid のディメンションとしてマスクのディメンションを基準とする水平スクロールバーが自動的に追加されます。

    スタイル設定

    Grid は、さまざま状態の各セル テキスト、アイコン、背景色のスタイル設定や水平および垂直の境界線の非表示など柔軟に変更できます。

    使用方法

    Grid の最も重要な点は、Header および Body セル内のデータの配置です。テキストは常に左揃えにして変数空スペースを右に残し、数値は常に右揃えにして変数空スペースを左に残します。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。