列ピン固定

    Grid 列ピン固定は、スクロール可能なグリッドで最初の数列を左に固定するための構造として使用します。ユーザーがスクロールすると、ピン固定された列以外、すべての他の列は右や左に移動します。ピン固定列は常にスクロール可能な列の上に表示されます。Grid 列ピン固定は、Ignite UI for Angular Grid 列ピン固定機能と視覚的に同じものです。

    Grid 列ピン固定のデモ

    ヘッダー セル機能

    列をピン固定可能として示すには、Sketch でその列の Grid Header Cell の Column Pinning オーバーライドを使用し、デフォルト値を Not Pinned (ピン固定されていない) から Pinned (ピン固定されている) に変更します。Figma で同じことを実現するには、ヘッダー セルに移動し、レイヤー パネルから Column Pinning レイヤーを選択し、プロパティ パネルで Feature プロパティを Pinned に設定する必要があります。Adobe XD では、Column Pinning レイヤーは Component States パラダイムを使用して、状態を簡単に切り替えることができます。コード生成には、これにより列をピン固定可能としてマークします。

    組み込みの列の固定は、Grid のツールバーから使用できます。このツールバーには、デフォルトで、グリッド全体の列のピン固定状態を構成できるボタン (コンボ ドロップダウンと組み合わせて) が含まれています。

    カスタム列ピン固定

    Grid Header Cell にカスタムピン固定操作を追加することもできます。Sketch では、これを実現するには、Feature Left または Feature Right オーバーライドを使用し、それを Icon Template に設定します。Figma でも方法は同じです。Header Cell レイヤーに移動し、Feature Left または Feature Right レイヤーを選択し、その Type プロパティを None から Icon Template に変更する必要があります。もちろん、左から右に見るときにピン固定されたものが最初に来るように、列の順序を並べ替えることもできます。

    セルの右境界線

    右端の列には、ヘッダーと列のすべての本文セルの両方に対して Pinned Line を示す Right Border のオーバーライドが必要です。件名列はピン固定されているため、2 行の 2 列目のすべてのセルで実行されます。これは下の画像に表示されています。

    その他のリソース

    関連トピック:

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