Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Gallery

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

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

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

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

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

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

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

    この例では、リストを削除し、ローカル画像をGalleryウィジェットに追加しています。

  4. 要素ツリーでImageウィジェットを選択し、[Properties]タブの[Image]ドロップダウンでGalleryに含める画像を選択またはインポートします。

    注記: この例では、画像のTypeプロパティはLocal Imageに設定されています。外部画像やバイナリデータ画像を追加することもできます。

  5. Properties]タブで関連する(オプションの)プロパティを設定します。たとえば、各デバイス上で表示するアイテムの数(以下の例を参照)や各アイテム間のスペース(GutterSize)などを設定します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

1行あたり4アイテム

1行あたり3アイテム

1行あたり2アイテム

1行あたり1アイテム

プロパティ

プロパティ 説明
ItemInPhone(Integer型): オプション スマホ上で表示するアイテムの数。

  • 空白 - アイテムが1つ表示されます。これがデフォルト値です。
  • 2 - アイテムが2つ表示されます。
ItemsInTablet(Integer型): タブレット上で表示するアイテムの数。

  • 空白 - アイテムが3つ表示されます。これがデフォルト値です。
  • 2 - アイテムが1つ表示されます。
ItemsInDesktop(Integer型): デスクトップ上で表示するアイテムの数。

  • 空白 - アイテムが4つ表示されます。これがデフォルト値です。
  • 3 - アイテムが3つ表示されます。
GutterSize(Space Identifier型):オプション アイテム間のスペースを定義します。以下のサイズが事前定義されています。

  • None
  • Extra Small
  • Small
  • Base
  • Medium
  • Large
  • Extra Large
  • Extra Extra Large

  • 空白 - 各アイテム間のスペースが16pxになります。これがデフォルト値です(Entities.Space.Base)。
  • Entities.Space.Large - 各アイテム間のスペースが32pxになります。
  • Was this article helpful?