Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

カルーセル

Carousel UIパターンを使用すると、複数のアイテムを水平方向のスライドに表示できます。小さい画面で水平方向のスライドを作成する場合は、このパターンが適しています。プレースホルダ内に直接Listを配置して、動的コンテンツでこのパターンを使用することもできます。

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

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

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

    デフォルトで、Carouselウィジェットには[Carousel Items]プレースホルダ、[list list-group]プレースホルダ、Imageウィジェットが含まれています。

  3. Carousel Items]プレースホルダにコンテンツを追加します。

    この例では、list list-groupを削除し、Imageウィジェットを3つ追加しています。画像のリストを追加することもできます。

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

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

  5. Carouselに含める画像ごとに手順4を繰り返します。

  6. 要素ツリーでCarouselウィジェットを選択し、[Properties]タブで関連する(オプションの)プロパティを設定します。たとえば、ナビゲーション矢印やドットなどを設定します。

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

プロパティ

プロパティ 説明
Navigation(Boolean型): オプション 左右に移動する矢印ボタンを有効化または無効化します。

  • 空白 - ナビゲーション矢印は表示されません。
  • True - ナビゲーション矢印が表示されます。
  • False - ナビゲーション矢印は表示されません。これがデフォルト値です。
Dots(Boolean型): オプション Carousel上のアイテムを表すナビゲーションドットを有効化または無効化します。

  • 空白 - ナビゲーションドットが表示されます。これがデフォルト値です。
  • True - ナビゲーションドットが表示されます。
  • False - ナビゲーションドットは表示されません。
Margin(Integer型): オプション 各カルーセルアイテム間の距離を設定します。

  • 空白 - 各カルーセルアイテム間の距離をなくします。これがデフォルト値です。
  • 2 - 各カルーセルアイテム間の距離を2ピクセルにします。
Padding(Integer型): オプション 画面の端と画面上の表示項目との間の距離を設定します。

  • 空白 - 画面の端と画面上の項目との間の距離をなくします。これがデフォルト値です。
  • 5 - 画面の端と画面上の項目との間の距離を5ピクセルにします。
AutoPlay(Autoplay Identifier型): オプション Carousel内のアイテムを自動的に表示する自動再生機能を有効化または無効化します。自動再生速度も設定できます。以下の自動再生の値が事前定義されています。

  • 無効
  • Fast(2秒)
  • Normal(5秒)
  • Slow(8秒)

  • 空白 - 自動再生が無効になります。
  • Entities.Autoplay.Fast - アイテムが2秒おきの間隔で表示されます。
  • Entities.Autoplay.Slow - アイテムが8秒おきの間隔で表示されます。
Scale(Boolean型): オプション この設定はアクティブなカルーセルアイテムに対して使用します。Trueに設定すると、画像を移動する際に、アクティブなアイテムのサイズが減り始め、次にアクティブなアイテムになる要素のサイズが増えます。デフォルト値はFalse。
Loop(Boolean型): オプション Trueに設定すると、Carouselが最後のアイテムに達すると最初のアイテムにループし、再びすべてのアイテムの表示が始まります。Falseに設定すると、最後のアイテムに達するとカルーセルアイテムのスライドが終了します。これがデフォルト値です。
Center(Boolean形): オプション Trueに設定すると、Carouselのアクティブなアイテムが水平方向の中央に表示されます。Falseに設定すると、アクティブなアイテムが水平方向の中央に表示されません。これがデフォルト値です。
InitialPosition(Integer型): オプション Carouselに最初に表示される要素を設定します。

  • 空白 - Carouselの最初の要素が表示されます。これがデフォルト値です。
  • 3 - Carouselの4番目の要素が表示されます。
ItemsPhone(Integer型): オプション スマホ上で同時に表示されるカルーセルアイテムの数。

  • 空白 - アイテムが1つ表示されます。これがデフォルト値です。
  • 4 - アイテムが4つ表示されます。
ItemsTablet(Integer型): オプション タブレット上で同時に表示されるカルーセルアイテムの数。

  • 空白 - アイテムが1つ表示されます。これがデフォルト値です。
  • 4 - アイテムが4つ表示されます。
ItemsDesktop(Integer型): オプション デスクトップ上で同時に表示されるカルーセルアイテムの数。

  • 空白 - アイテムが1つ表示されます。これがデフォルト値です。
  • 4 - アイテムが4つ表示されます。

他のパターンとの互換性

TabsやStacked Cardsなど、スワップイベントを使用するパターン内でのCarouselの使用は避けてください。

サンプル

Product DashboardのサンプルでCarouselパターンがどのように使用されているかについてご覧ください。

  • Was this article helpful?