Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Columns

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

Columns UIパターンの使用方法

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

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

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

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

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

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

プロパティ

プロパティ 説明
GutterSize(GutterSizeIdentifier型): オプション 各列の間のスペースを定義します。



  • 空白 - 各列の間のスペースを16pxのままにします。これがデフォルトです(Entities.GutterSize.Base)。
  • Entities.GutterSize.None - 各列の間のスペースをなくします。
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.ColumnBreak.BreakNone(デフォルト)

Entities.ColumnBreak.BreakMiddle

Entities.ColumnBreak.BreakLast

Entities.ColumnBreak.BreakFirst

サンプル

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

  • Was this article helpful?