Columns
Columns UIパターンを使用すると、コンテンツを複数の列に分割することができ、画面上の情報が見やすくなります。
Columns UIパターンの使用方法
-
Service Studioのツールボックスで
Columnsを検索します。様々なColumnsウィジェットが表示されます。
-
ツールボックスから、必要なColumnsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。以下の例では、Columns 2ウィジェットを使用しています。
-
必要なコンテンツをColumnsウィジェットに追加します。この例では、画像とテキストを追加しています。
-
［Properties］タブで（オプションの）プロパティを設定し、Columnのルックアンドフィールを変更できます。たとえば、各列の間のスペースのサイズ（GutterSize）や様々なデバイス上で列が表示される順序を設定できます。
-
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| GutterSize（GutterSizeIdentifier型）: オプション | 各列の間のスペースを定義します。 例
|
| TabletBehavior（BreakColumns Identifier型）:オプション | タブレット上で列がどのように表示されるかを定義します。以下のタブレットの動作オプションが事前定義されています。
|
| PhoneBehavior（BreakColumns Identifier型）:オプション | スマホ上で列がどのように表示されるかを定義します。以下のスマホの動作オプションが事前定義されています。
|
| ExtendedClass（Text型）:オプション | Columns UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
Entities.ColumnBreak.BreakNone（デフォルト）
Entities.ColumnBreak.BreakMiddle
Entities.ColumnBreak.BreakLast
Entities.ColumnBreak.BreakFirst
