Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Columns

コンテンツをレスポンシブ機能を持つ複数の列に分割し、情報の表示方法を改善します。

使用方法

このパターンをWeb画面に配置し、各プレースホルダにコンテンツを追加します。

  1. Columnsパターンをプレビューにドラッグします。
  2. プレースホルダに必要なコンテンツを設定します。

  3. 入力パラメータをデフォルト値に設定します。

入力パラメータ

入力名 説明 必須 デフォルト値
GutterSize 余白サイズを設定します。 GutterSize Identifier False Entities.GutterSize.Gutter_L
TabletBehavior タブレット用のレスポンシブ動作。 BreakColumns Identifier False Entities.BreakColumns.None
PhoneBehavior スマホ用のレスポンシブ動作。 BreakColumns Identifier False Entities.BreakColumns.All
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.columns .columns2 Columns2パターンの場合
.columns .columns3 Columns3パターンの場合
.columns .columns4 Columns4パターンの場合
.columns .columns5 Columns5パターンの場合
.columns .columns6 Columns6パターンの場合
.columns .columns-medium-left ColumnsMediumLeftパターンの場合
.columns .columns-medium-right ColumnsMediumRightパターンの場合
.columns .columns-small-left ColumnsSmallLeftパターンの場合
.columns .columns-small-right ColumnsSmallRightパターンの場合
.columns .gutter-none 列のアイテム間の余白がない場合
.columns .gutter-xs 列のアイテム間の余白が4pxの場合
.columns .gutter-s 列のアイテム間の余白が8pxの場合
.columns .gutter-base 列のアイテム間の余白が16pxの場合
.columns .gutter-m 列のアイテム間の余白が24pxの場合
.columns .gutter-l 列のアイテム間の余白が32pxの場合
.columns .gutter-xl 列のアイテム間の余白が40pxの場合
.columns .gutter-xxl 列のアイテム間の余白が48pxの場合
.columns .tablet-break-all タブレットで列のすべてのアイテムを改行する場合
.columns .tablet-break-first タブレットで列の最初のアイテムを改行する場合
.columns .tablet-break-last タブレットで列の最後のアイテムを改行する場合
.columns .tablet-break-middle タブレットで列の中間のアイテムを改行する場合
.columns .tablet-break-none タブレットで列を改行しない場合
.columns .phone-break-all スマホで列のすべてのアイテムを改行する場合
.columns .phone-break-first スマホで列の最初のアイテムを改行する場合
.columns .phone-break-last スマホで列の最後のアイテムを改行する場合
.columns .phone-break-middle スマホで列の中間のアイテムを改行する場合
.columns .phone-break-none スマホで列を改行しない場合
  • Was this article helpful?