グループ化

Grid グループ化 を使用して、特定の列内の一致する値によって定義されたグループの階層コレクションでデータ レコードを整理します。グループ化の条件の順序は、Grid Header の上の特別な領域に表され、新しいグループの開始をマークするために、Grid レコードの間に特別な行が挿入されます。Grid グループ化は、Ignite UI for Angular Grid のグループ化と視覚的に同じものです。

Grid グループ化のデモ

グループ化領域

Grid には、Sketch の Grid Features の下に Group Area シンボルがあり、レコードの階層グループを確立するために使用される列と、これらのグループがネストされる順序を指定します。Sketch で挿入すると、Detach from Symbol を実行できます。内部には、グループ化がグリッドに適用される方法を定義する方法で構成できる Chips Area があります。Figma では、Group Area コンポーネントは Grid Featuresの下にあり、グリッド コンポーネントがデタッチされると、グリッド コンポーネント内のアセット パネルから挿入されます。Group Area 内のチップ領域はデタッチせずに直接変更することができます。Adobe XD には一致するコンポーネントがあり、挿入時に分割せずに直接編集できます。

行でグループ化

グリッドには、Features の下にある GroupBy Row シンボル / コンポーネントがあります。これは、グループ化されたレコードの前にある見出しのようなグリッド内の特別な行を表します。このシンボル / コンポーネントを追加してもデザインに視覚的な効果があるだけで、よりリアルになります。Sketch でグループ化機能を切り替えたい場合は、Group Area を挿入して設定します。Adobe XD では、GroupBy Row コンポーネントを単純に挿入できます。Figma では、最初にグリッドをデタッチし、次に GroupBy Row コンポーネントを挿入する必要があります。

その他のリソース

関連トピック:

• Grid
• Chips

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