Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Carouselのリファレンス

点をカスタマイズする

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パターンを使用する

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

.col {
    overflow: hidden;
}

カルーセルアイテムの現在の位置を取得する

  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という名前のBoolean型のローカル変数を作成します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CarouselでListRemoveを作成する

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

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

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

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

イベント

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

レイアウトおよびクラス

CSSセレクタ

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