Skip to main content

 

UIを設計する

 

OutSystems

Columnsパターン

Columnsパターンを使用すると、コンテンツを複数の列に分割できます。 その動作は、入力パラメータを使用して構成できます。 これにより、異なるデバイスでの列の並べ方を定義します。 異なるデバイスでの情報の表示方法を改善する場合に最適です。 このパターンを使用すると、様々なデバイスで、1行あたりのアイテム数が異なる要素のリストを並べて表示できます。

以下は、列を分割する様々な方法を示すDevelopment環境でのプレビューです。

Columnsパターンの使用方法

入力パラメータを使用して動作を構成し、異なるデバイスでの列の並べ方を定義します。

列が奇数の場合は、以下のように分割されます。

Entities.ColumnBreak.BreakNone(デフォルト)

Entities.ColumnBreak.BreakMiddle

Entities.ColumnBreak.BreakLast

Entities.ColumnBreak.BreakFirst

入力パラメータ

入力名 説明 デフォルト値
UseGutter 列の間にスペースを作成します。. True
PhonePortraitBreak スマホが縦向きの場合の列の動作。 BreakNone
PhoneLandscapeBreak スマホが横向きの場合の列の動作。 BreakNone
TabletPortraitBreak タブレットが縦向きの場合の列の動作。 BreakNone
TabletLandscapeBreak タブレットが横向きの場合の列の動作。 BreakNone

レイアウトおよびクラス

サンプル

Account DashboardのサンプルでColumnsパターンがどのように使用されているかについてご覧ください。

  • Was this article helpful?