Grid Column Moving (グリッド列移動)

    Grid 列移動は、グリッドの列が移動可能であり、Header Cell をドラッグして目的の場所にドロップすることで再配置できることを示すために使用します。Grid 列移動は、Ignite UI for Angular Grid 列移動機能と視覚的に同じものです。

    Grid 列移動のデモ

    Header Cell (ヘッダー セル)

    列が移動可能であることを示するには、デフォルト値を Not Movable から Movable に変更すると、Sketch の列の Grid Header Cell の Column Moving のオーバーライドを設定します。Figma では、グリッド ヘッダー セル レイヤー内の Column Moving コンポーネントのプロパティを Not Movable から Movable に変更することでこれを実現できます。Adobe XD では、Column Moving レイヤーは Component States パラダイムを使用して、状態を簡単に切り替えることができます。コード生成には、これにより列を移動可能としてマークします。

    Column Moving Feature (列移動機能)

    Grid の Features の下には、ドラッグされた列に表示されるゴースト Header Cell を表す Column Moving シンボル / コンポーネントがあります。数値列とテキスト列のプリセットが付属しています。このシンボル / コンポーネントを追加すると、デザインに視覚的な効果のみでよりリアルになります。Column Moving 機能を切り替えたい場合は、Header Cell を構成します。

    その他のリソース

    関連トピック:

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