カルーセル
この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。
Carousel UIパターンを使用すると、複数のアイテムを水平方向のスライドに表示できます。小さい画面で水平方向のスライドを作成する場合は、このパターンが適しています。プレースホルダ内に直接Listを配置して、動的コンテンツでこのパターンを使用することもできます。
Carousel UIパターンの使用方法
-
Service Studioのツールボックスで
Carouselを検索します。Carouselウィジェットが表示されます。
-
ツールボックスから、Carouselウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
Carouselに表示するコンテンツを［Items］プレースホルダ内に配置します。(この例では画像を使用します）。
-
ツールボックスから、ImageウィジェットをLight Box Imageウィジェットにドラッグします。これがサムネイル画像になります。
［Select Image］ポップアップが表示されます。
-
表示する画像を選択またはインポートします。この例では、OutSystems UIのサンプル画像を使用します。
注記: この例では、画像のTypeプロパティはStaticに設定されています。External URLまたはDatabaseを選択することもできます。
データベースのアイテムを含むカルーセルを使用するには、［Items］プレースホルダにListRecordsウィジェットをドラッグしてカスタムコンテンツを作成します。
-
カルーセルアイテムごとに手順4～5を繰り返します。
-
要素ツリーでCarouselウィジェットを選択し、［Properties］タブで関連する（オプションの）プロパティを設定します。たとえば、ナビゲーション矢印や様々なデバイス上で表示するアイテムの数などを設定します。
-
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| Margin（Integer型）:オプション | 各カルーセルアイテム間の距離を設定します。デフォルト値は0。 例
|
| Padding（Integer型）:オプション | 画面の端と画面上の表示項目との間の距離を設定します。 例
|
| Pagination（Boolean型）:オプション | Carousel上のアイテムを表すナビゲーションドットを有効化または無効化します。 例
|
| Autoplay（Boolean型）:オプション | Trueに設定すると、Carousel内のアイテムを自動的に表示する自動再生機能が有効になります。Falseに設定すると、自動再生機能が無効になります。これがデフォルト値です。 |
| Rewind（Boolean型）:オプション | Trueに設定すると、Carouselが最後に達したときに巻き戻しの効果が適用され、Loopプロパティが有効になります。デフォルトの動作では、残りを巻き戻しせずに最初のアイテムを表示します。 |
| Loop（Boolean型）:オプション | Trueに設定すると、Carouselが最後のアイテムに達すると最初のアイテムにループし、再びすべてのアイテムの表示が始まります。Falseに設定すると、最後のアイテムに達するとカルーセルアイテムのスライドが終了します。これがデフォルト値です。 |
| InitialPosition（Integer型）:オプション | Carouselに最初に表示される要素を設定します。 例
|
| ItemsDesktop（Integer型）:オプション | デスクトップ上で同時に表示されるカルーセルアイテムの数。 例
|
| ItemsTablet（Integer型）:オプション | タブレット上で同時に表示されるカルーセルアイテムの数。 例
|
| ItemsPhone（Integer型）:オプション | スマホ上で同時に表示されるカルーセルアイテムの数。 例
|
| ExtendedClass（Text型）:オプション | Carousel UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|
| AdvancedFormat（Text型）: オプション | プロパティによって提供されるオプションのほかに、追加オプションを使用できます。詳細については以下をご覧ください。https://github.com/ganlanyuan/tiny-slider 例 |