Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Stacked Cardsリファレンス

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

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

.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をブロックのパブリックアクションにドラッグします。

イベント

イベント名 説明 必須
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 コンテンツの左に配置されたオーバーレイを表します。
  • Was this article helpful?