Grid (グリッド)

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

    Grid のデモ

    Sketch で Grid を使用

    Grid は、基本的に表形式でデータを表示する列と行のリピーターです。したがって、最も簡単な使用方法は、定義済みの Grid の 1 つをアートボードにドラッグすることです。サポートされる 3 つの表示密度に 3 つのプリセットがあります。アートボードを開いた後、その上を右クリックし、コンテキスト メニューの下部にある Detach from Symbol オプションを選択すると、新しく表示されたグループの下のレイヤー パネルに次のように表示されます。

    レイヤー 使用
    🚫 metadata 禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください
    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 セルは、Grid の 3 つの表示密度バリアントをサポートします: comfortable、cosy、および compact。以下のヘッダー セルに見られるように、それぞれに異なるシンボルが付いています:

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

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

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

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

    Grid Body Cell は、Grid Feature を介してヘッダーで定義された一部の Grid 機能のスタイル設定をサポートしています。通常のセル、編集可能なセル、および選択した行に属するセルには、スタイルのバリアントがあります。Sketch では、Grid Feature を切り替えるには、使用可能な Symbol Overrides を使用する必要がありますが、Adobe XD では、Component States の一致するリストがあります。

    セル タイプ

    Sketch の Grid Header Cell は、Grid が対応する必要のある 4 つの一般的なタイプのデータのプリセットを提供します: 数値の Number、それぞれのデータ タイプのテキスト、日付、ブールを組み合わせたもの、複数の行を選択する場合に最初の列に使用される Row Selection と、グループ化されたデータ行を展開および縮小するために使用される Group By です。Adobe XD では、3 つのタイプがあります。データに標準のもの、Row Selection、Group By の標準タイプで、標準のタイプは Component States を介した数値とテキスト/日付/ブール値の選択をサポートしています。

    Grid Body Cell は、Header Cell の同じ一般的なデータ型のプリセットを提供し、単純なグラフィックスを視覚化する追加のアイコン タイプを含みます。

    Grid の水平スクロール

    絶対幅として、または親グループ/コンテナに関連する特定の Grid ディメンションを達成する 1 つの方法は、Grid のメイン グループ内にマスクを追加することです。スタイル設定なしで長方形を挿入し、必要に応じてそのサイズを設定します。下の画像では、常に正確に 800px 幅の Grid があります。

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

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

    スタイル設定

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

    使用方法

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

    良い例 悪い例

    その他のリソース

    関連トピック:

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