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_に変更したときにプレースホルダ内にコンテンツを追加した場合、オーバーレイは表示されません。

   

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

イベント

レイアウト

CSSセレクタ