Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

カルーセル

この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。

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

Carousel UIパターンの使用方法

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

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

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

  1. Carouselに表示するコンテンツを[Items]プレースホルダ内に配置します。(この例では画像を使用します)。

  2. ツールボックスから、ImageウィジェットをLight Box Imageウィジェットにドラッグします。これがサムネイル画像になります。

    Select Image]ポップアップが表示されます。

  3. 表示する画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。

    注記: この例では、画像のTypeプロパティはStaticに設定されています。External URLまたはDatabaseを選択することもできます。

    データベースのアイテムを含むカルーセルを使用するには、[Items]プレースホルダにListRecordsウィジェットをドラッグしてカスタムコンテンツを作成します。

  4. カルーセルアイテムごとに手順4~5を繰り返します。

  5. 要素ツリーでCarouselウィジェットを選択し、[Properties]タブで関連する(オプションの)プロパティを設定します。たとえば、ナビゲーション矢印や様々なデバイス上で表示するアイテムの数などを設定します。

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

プロパティ

プロパティ 説明
Margin(Integer型):オプション 各カルーセルアイテム間の距離を設定します。デフォルト値は0。

  • 空白 - 各カルーセルアイテム間の距離を16ピクセルにします。
  • 32 - 各カルーセルアイテム間の距離を32ピクセルにします。
Padding(Integer型):オプション 画面の端と画面上の表示項目との間の距離を設定します。

  • 空白 - 画面の端と画面上の項目との間の距離をなくします。これがデフォルト値です。
  • 5 - 画面の端と画面上の項目との間の距離を5ピクセルにします。
Pagination(Boolean型):オプション Carousel上のアイテムを表すナビゲーションドットを有効化または無効化します。

  • 空白 - ナビゲーションドットが表示されます。これがデフォルト値です。
  • True - ナビゲーションドットが表示されます。
  • False - ナビゲーションドットは表示されません。
Autoplay(Boolean型):オプション Trueに設定すると、Carousel内のアイテムを自動的に表示する自動再生機能が有効になります。Falseに設定すると、自動再生機能が無効になります。これがデフォルト値です。
Rewind(Boolean型):オプション Trueに設定すると、Carouselが最後に達したときに巻き戻しの効果が適用され、Loopプロパティが有効になります。デフォルトの動作では、残りを巻き戻しせずに最初のアイテムを表示します。
Loop(Boolean型):オプション Trueに設定すると、Carouselが最後のアイテムに達すると最初のアイテムにループし、再びすべてのアイテムの表示が始まります。Falseに設定すると、最後のアイテムに達するとカルーセルアイテムのスライドが終了します。これがデフォルト値です。
InitialPosition(Integer型):オプション Carouselに最初に表示される要素を設定します。

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

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

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

  • 空白 - アイテムが1つ表示されます。これがデフォルト値です。
  • 4 - アイテムが4つ表示されます。
ExtendedClass(Text型):オプション Carousel UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるCarousel UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるCarousel UIのスタイルに_myclass1_というスタイルと_myclass2」というスタイルを追加します。
AdvancedFormat(Text型): オプション プロパティによって提供されるオプションのほかに、追加オプションを使用できます。詳細については以下をご覧ください。https://github.com/ganlanyuan/tiny-slider

{ axis:'vertical' }

  • Was this article helpful?