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