グループ化
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
コンポーネントを挿入する必要があります。
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。