Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Gallery

Gallery UIパターンを使用すると、コンテンツのグループを表示できます。このUIパターンでは、最初と最後の概念を持つ画像をユーザーが順番に参照できます。

Gallery UIパターンの使用方法

通常、Gallery UIパターンは動的な情報を表示します。多くの場合、このパターンを使用する前に、画面に表示する情報を含むデータを取得または更新する必要があります。これを行うには、アクションを使用します。このユースケースでは、ローカルリソースを使用します。

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

    Galleryウィジェットが表示されます。

  2. ツールボックスから、Galleryウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. 必要なコンテンツをGalleryウィジェットに追加します。

    デフォルトでは、Galleryウィジェットはリストを想定しています。

    データベースのアイテムを含むGallery UIパターンを使用するには、List RecordをGalleryウィジェットにドラッグしてカスタムコンテンツを作成します。

    この例では、リストを削除し、ImageウィジェットをGalleryウィジェットにドラッグし、OutSystems UIの画像から画像を選択して追加しています。必要に応じて追加することができます。

  4. 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を使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるGallery UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるGallery UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。

その他の注記

ListRecordsのLine Separatorは[None]にする必要があります。

  • Was this article helpful?