Gallery
Gallery UIパターンを使用すると、コンテンツのグループを表示できます。このUIパターンでは、最初と最後の概念を持つ画像をユーザーが順番に参照できます。
Gallery UIパターンの使用方法
通常、Gallery UIパターンは動的な情報を表示します。多くの場合、このパターンを使用する前に、画面に表示する情報を含むデータを取得または更新する必要があります。これを行うには、アクションを使用します。このユースケースでは、ローカルリソースを使用します。
-
Service Studioのツールボックスで
Gallery
を検索します。Galleryウィジェットが表示されます。
-
ツールボックスから、Galleryウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
必要なコンテンツをGalleryウィジェットに追加します。
デフォルトでは、Galleryウィジェットはリストを想定しています。
データベースのアイテムを含むGallery UIパターンを使用するには、List RecordをGalleryウィジェットにドラッグしてカスタムコンテンツを作成します。
この例では、リストを削除し、ImageウィジェットをGalleryウィジェットにドラッグし、OutSystems UIの画像から画像を選択して追加しています。必要に応じて追加することができます。
-
[Properties]タブで、様々なデバイスタイプごとに1行あたりに表示するアイテムの数を設定できます(以下の例を参照)。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
以下の例は、1行あたりに表示されるアイテムの数の指定に応じてアイテムがどのように表示されるかを示しています。
1行あたり4アイテム
1行あたり3アイテム
1行あたり2アイテム
1行あたり1アイテム
プロパティ
プロパティ | 説明 |
---|---|
ItemsDesktop(Integer型): オプション | デスクトップ上で1行あたりに表示するアイテムの数。 |
ItemsTablet(Integer型):オプション | タブレット上で1行あたりに表示するアイテムの数。 |
ItemsPhone(Integer型):オプション | スマホ上で1行あたりに表示するアイテムの数。 |
ExtendedClass(Text型):オプション | Gallery UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
その他の注記
ListRecordsのLine Separatorは[None]にする必要があります。