Skip to main content

 

UIを設計する

 

OutSystems

Stacked Cardsパターン

Stacked Cardsパターンには、複数のアイテムが含まれます。動的コンテンツの場合、[Content]プレースホルダ内で直接Listを使用します。左右および上にスワイプしたときに表示されるコンテンツは動的であり、ユーザーが設定する必要があります。このパターンを使用すると、メッセージボードを作成したり、複数の画像を表示したりできます。

スマホやタブレットのアプリで要素を動的に表示する場合、このパターンを使用します。すべてのテンプレートや画面と完全な互換性があります。

以下は、Service Studioでのプレビューです。

Stacked Cardsパターンの使用方法

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

2.コンテンツを[Content]プレースホルダ内に配置します。

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

  1. オーバーレイを使用するには(UseOverlaysはデフォルトで_True_です)、各プレースホルダ([OverlayTop]、[OverlayRight]、[OverlayLeft])内にコンテンツを配置します。

a. 「Use Overlays」オプションが[True]に設定されているときにプレースホルダ内にコンテンツを配置しなかった場合、オーバーレイは表示されません。
b. 「Use Overlays」オプションを_False_に変更したときにプレースホルダ内にコンテンツを追加した場合、オーバーレイは表示されません。

5. モバイルアプリをパブリッシュします。

要素にスタイルを追加する

この例は、パターンの要素にスタイルを追加する方法を示しています。

.stackedcards-bottom, .stackedcards-top, .stackedcards-none {
     border-bottom: 1px solid #ebebeb; // Add a border-bottom to all elements
    background-color: #000; // Set a background-color to all elements
}

要素の高さを画面全体に設定する

パターンの要素の高さを画面全体に設定して画面全体に表示されるようにするには、以下のCSSコードを使用します。

.stackedcards-container,
.stackedcards {
    height:100vh;
    -servicestudio-height: auto;
}

すべての要素の特定の高さを定義する

最初の要素の高さによってパターン内の各要素の高さが定義されます。特定の高さに設定するには、以下のCSSコードを使用します。

.stackedcards-container {
    height:500px; // set your height
}

オーバーレイに異なる背景色を適用する

パターンではオーバーレイがデフォルトで有効になっており、デフォルトの色が設定されています。使用しない場合、「UseOverlays」を[False]に設定します。

1. 「UseOverlays」オプションが[True]に設定されているときにプレースホルダ内にコンテンツを配置しなかった場合、オーバーレイは表示されません。

2. 「UseOverlays」オプションを_False_に変更したときにプレースホルダ内にコンテンツを追加した場合、オーバーレイは表示されません。

OverlayTopOverlayRight、またはOverlayLeftにコンテナを追加してクラスを設定し、他の色を設定することができます。または、以下のCSSコードを使用します。

.stackedcards-overlay.top {
     background-color: #2980b9; //set your background-color
}
.stackedcards-overlay.right {
    background-color: #27ae60; //set your background-color
}
.stackedcards-overlay.left {
    background-color: #c0392b; //set your background-color
}

スワイプを実行するボタンを作成する

各アクションを作成し、パブリックアクション(SwipeLeft、SwipeRight、またはSwipeTop)をドラッグします。Stacked Cardsブロックで、ハンドラをスワイプイベントに関連付けます。

ListRemoveボタンを作成する

「OnListRemove」アクションを作成し、ListRemoveNodeおよびUpdateStackedCardsをブロックのパブリックアクションにドラッグします。

入力パラメータ

入力パラメータ 説明 デフォルト値
StackedOptions スタックカードの表示を下から、上から、またはなしに変更します。 View from bottom
Rotate スタックカードを移動するたびに要素の回転を有効化します。 True
Items スタックカードオプションが下または上のときに表示される要素の数。 5
ElementsMargin スタックカードオプションが下または上のときの各要素の距離を定義します。 5
UseOverlays スワイプ要素のオーバーレイを有効化または無効化します。 True

イベント

イベント名 説明 必須
OnItemChange アクティブなカードの位置を返します。 False
OnLeftSwipe 左にスワイプするとトリガーされます。 False
OnRightSwipe 右にスワイプするとトリガーされます。 False
OnTopSwipe 上にスワイプするとトリガーされます。 False

レイアウト

CSSセレクタ

要素 CSSクラス 説明
Stacked Cards Wrapper .stackedcards すべてのStacked Cards要素をラップするコンテナ。
Selected Active Element .stackedcards-active 現在アクティブな要素を表します。
Overlay Top .stackedcards-overlay top コンテンツの上に配置されたオーバーレイを表します。
Overlay Right .stackedcards-overlay right コンテンツの右に配置されたオーバーレイを表します。
Overlay Left .stackedcards-overlay left コンテンツの左に配置されたオーバーレイを表します。

他のパターンとの互換性

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

サンプル

以下は、Stacked Cardsパターンを使用したサンプルです。

  • Was this article helpful?