Skip to main content

 

UIを設計する

 

OutSystems

Carouselパターン

Carouselパターンを使用すると、複数のアイテムを水平方向のスライドに表示できます。 プレースホルダ内の要素は異なるアイテムに分割されます。 動的コンテンツの場合は、プレースホルダ内で直接Listを使用します。 小さい画面で水平方向のスライドを作成する場合は、Carouselブロックが適しています。

以下は、Development環境でのプレビューです。

要素をプレースホルダにドラッグして異なるアイテムに分割します。動的なコンテンツの場合は、プレースホルダ内で直接Listを使用します。仮想化を無効にし、アニメーションを使用したアイテムを[False]に設定します。

デフォルトでは、リストアイテムがカルーセルアイテムになります。

1. Carouselパターンを画面にドラッグします。

2. コンテンツを[CarouselItems]プレースホルダ内に配置します。リストを使用するには、リストを[CarouseItems]プレースホルダにドラッグします(仮想化を無効にし、アニメーションを使用したアイテム**を[False]に設定します)。

**

3. 使用できるすべてのオプションにデフォルトパラメータがありますが、これらは変更できます。

4. アプリをパブリッシュします。

点をカスタマイズする

CSSを使用して点のルックアンドフィールをカスタマイズできます。

例1:

.carousel .carousel-dots-container .carousel-dot.active {
     opacity: 1;
    width:16px;
    height:2px;
    margin-top:2px;
    transition: opacity 275ms ease-out;
}


.carousel .carousel-dots-container .carousel-dot {
    border-radius:0;
    height:1px;
    margin:3px 3px;
    width:8px;
    transition: opacity 275ms ease-out;
}

例2:

.carousel-dots-container .carousel-dot {
     background: #fff;
    border:0px solid #fff;
    height:4px;
    margin:3px;
    opacity:.5;
    width:4px;
}


.carousel-dots-container .carousel-dot.active {
    background: transparent;
    border:1px solid #fff;
    opacity:1;
}

列内でのカルーセルの使用

Columnsパターン内でCarouselを使用する場合、以下のスタイルをCSSに追加して列のオーバーフローを修正する 必要があります。

.col {
    overflow: hidden;
}

カルーセルアイテムのCurrentPositionを取得する

  1. 画面でIntegerローカル変数(Positionなど)を作成します。
  2. ブロックのOnItemChangeイベントで、ハンドラに対応する新しいクライアントアクションを作成します(CarouselCurrentPosition)。
    a. アクションは変数Indexを受け取ります。これはCarousel内での現在の位置を示すイベントです。

  3. Assignノードをドラッグし、Position(ローカル変数)を[Index]に設定します。

一般的なオンボーディング画面では、画面全体の高さで表示されるカルーセルを使用していくつかのアイテムのスライドを表示し、最後のスライドにアプリの使用開始ボタンを表示します。

カルーセルを使用して独自のオンボーディング画面を作成するには、以下の手順を実行します。

画面全体に表示されるカルーセルを作成する

1.空のレイアウトを使用して新しい画面から開始します(Common\LayoutBlank)。

2.Carouselパターンを[Content]プレースホルダにドラッグします (Interaction\Carousel)。

3.Listのコンテンツ(静的または動的アイテム)をCarouselに追加します。
注記: Listウィジェットを使用する場合、仮想化を無効にする必要があります。

以下のようになります。

image.png

最後のカルーセルアイテムの表示時にボタンを表示する

1. 画面でShowButtonという名前のブーリアン型のローカル変数を作成します。

2. OnChangeという名前のアクションを作成して、CarouselのOnItemChangeハンドラに追加します。

3. このアクションでは、現在の位置がOnBoardingのCarouselの要素の合計数と等しいかどうかを検証します。

4. ロジックでは、「Index = 2」の場合はローカル変数に_True_が割り当てられ、それ以外の場合は_False_が割り当てられます。

2. 変数showButtonを使用してユーザーにボタンを表示します。

3. FloatingContentパターン(Content\FloatingContent)を画面にドラッグします。

7. Containerを追加し、Visibleパラメータにローカル変数showButtonを設定します。

a. 「Animate」ブロックをContainerにドラッグし、Animation Typeを設定します。

b. ボタンを[Content]プレースホルダに追加します。

8. アプリをパブリッシュします。

移動ボタンを含むカルーセルを作成する

このパターンにはパブリックアクションが含まれます。このアクションはCarouselの独自のナビゲーション(Next、Previous、GoTo)なしで使用できます。 このユースケースでは、カルーセル内を移動するボタンのみを使用します。

1. アクションを作成し、Next、Previous、GoToのいずれかのパブリックアクションをドラッグします。

2. ボタンを作成し、onClickイベントと作成したアクションを関連付けます。

3.以下の画像は、使用可能なすべてのアクションを示しています。

CarouselでListRemoveを作成する

このパターンには、パターン内のすべての変数と位置を更新するUpdateCarouselパブリックアクションが含まれています。

1.アクションを作成し、ListRemoveアクションおよびCarouselUpdateアクションをドラッグします。

2.ListRemoveOnClickボタンを作成し、作成したアクションを関連付けます。

3.以下の画像に例を示します。

入力パラメータ

入力名 説明 デフォルト値
Navigation 左右に移動するボタンを有効化または無効化します。 False
Dots Carousel上のアイテムを表す点を有効化または無効化します。これらをタップして特定のアイテムに直接移動できます。 True
Margin 各カルーセルアイテム間の距離を設定します。 0
Padding 画面の端と画面上の表示項目との間の距離を設定します。 0
AutoPlay 自動再生速度を有効化または無効化します。 Disabled
Scale 各カルーセルアイテムの拡大/縮小オプションを使用します。 False
Loop Carouselのスライドが最後になった後のスライドの連続表示を有効化または無効化にします。 False
Center アクティブなアイテムを水平方向の中央に表示します。 False
InitialPosition 最初に表示する要素を設定します。 0
Items 画面上に同時に表示されるカルーセルアイテムの数。 1

イベント

イベント名 説明 必須
OnItemChange アクティブなアイテムの現在の位置を返します。 False

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
Carousel Wrapper .carousel すべてのCarousel要素をラップするコンテナ。
Navigation Dots .carousel-dot カルーセルアイテムの数を表すすべての点。
Selected Navigation Dot .carousel-dot.active 現在アクティブなアイテムを表す点。

他のパターンとの互換性

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

サンプル

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

  • Was this article helpful?