Grid Row Selection (グリッド行選択)

Grid 行選択を使用して、Grid の左端の列として表示されるチェックボックスのある特別な選択列を介して完全な行を一度に選択します。Grid 行選択は、Ignite UI for Angular Grid 選択機能と視覚的に同じものです。

Grid 行選択ーのデモ

行選択列

Grid 行選択は、最初の列の左側に追加の列を作成し、その Header と Body セルの Type を Row Selection に設定することで実現できます。選択した行では、行のチェックボックスの状態を On に設定して、ヘッダーのチェックボックスの状態を Indeterminate に設定する必要があります。すべての行を選択した場合は、行の状態チェックボックスとヘッダーを On に設定する必要があります。

Row Selection Cell (行選択セル)

グリッドは、Sketch の Grid Feature オーバーライドを介して利用可能な選択された行に特別なタイプの Body セルを提供します。RowSelected/Cell に設定すると、選択した行に属するセルを示す区別可能なスタイルが適用されます。Figma では、グリッド セル内でネストされた Grid Feature コンポーネントを選択し、プロパティ パネルの Variant プロパティを使用して Row Selected に切り替えることでこれを実現できます。Adobe XD では、Grid Feature が Component States パラダイムを使用するレイヤーとして提供され、状態を簡単に切り替えることができます。

その他のリソース

関連トピック

• Grid

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