Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Columns

Columns UIパターンを使用すると、コンテンツを複数の列に分割することができ、画面上の情報が見やすくなります。

Columns UIパターンの使用方法

  1. Service StudioのツールボックスでColumnsを検索します。

    様々なColumnsウィジェットが表示されます。

  2. ツールボックスから、必要なColumnsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。この例では、Columns 2ウィジェットを画面にドラッグしています。

  3. 画像、フォーム、テキストなどの必要なコンテンツをColumnsウィジェットに追加します。この例では、画像とテキストを追加しています。

  4. Properties]タブでオプションのプロパティを設定し、Columnsのルックアンドフィールをカスタマイズできます。たとえば、列のサイズ、各列の間のスペースのサイズ(GutterSize)、様々なタイプのデバイス上で列が表示される順序を設定できます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
GutterSize(GutterSize Identifier型): オプション 余白サイズを設定します。デフォルトの余白サイズは大です。

  • 空白 - 各列間に大きい余白が適用されます(デフォルト値)。
  • Entities.GutterSize.Gutter_None - 各列間には余白が適用されません。
  • Entities.GutterSize.Gutter_XS - 各列間に非常に小さい余白が適用されます。
TabletBehavior(BreakColumns Identifier型): オプション タブレット上で列がどのように表示されるかを定義します。以下のタブレットの動作オプションが事前定義されています。

  • All
  • First
  • Last
  • Middle
  • None(デフォルト)

各設定でどのように表示されるかについては、以下の例をご覧ください。

PhoneBehavior(BreakColumns Identifier型): オプション スマホ上で列がどのように表示されるかを定義します。以下のスマホの動作オプションが事前定義されています。

  • All(デフォルト)
  • First
  • Last
  • Middle
  • None

各設定でどのように表示されるかについては、以下の例をご覧ください。

ExtendedClass(Text型): オプション Columns UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるColumns UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるColumns UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

以下の例は、選択したプロパティに応じて各デバイスで列がどのように表示されるかを示しています。

Entities.BreakColumns.None

Entities.BreakColumns.Middle

Entities.BreakColumns.Last

Entities.BreakColumns.First

  • Was this article helpful?