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_に設定します。
-
「UseOverlays」オプションが_True_に設定されているときにプレースホルダ内にコンテンツを配置しなかった場合、オーバーレイは表示されません。
-
「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をブロックのパブリックアクションにドラッグします。
イベント
イベント名 | 説明 | 必須 |
---|---|---|
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 | コンテンツの左に配置されたオーバーレイを表します。 |