1. 概要
複数ステップあるツアー・ポップアップにおいて、エンドユーザーが残りのステップ数や今どの段階にいるのかを視覚的に認知できるように、ステップ内にプログレスバーを挿入します。 ※プログレスバーを表示させるすべてのステップに設定が必要です
2. 設定方法
ステップへHTMLブロックを追加し、「3. サンプルコード」のコードを適宜修正して貼り付けします。
3. サンプルコード
あくまでサンプルコードとなりますので、作成したいデザインや内容を反映させてご利用ください。
プログレスバーを挿入する（ステップ1に表示する場合）
<div class="onb-steps-bar">
<!-- 表示しているステップを塗りつぶす(onb-step-completedを追加) -->
<div class="onb-step onb-step-completed">1</div>
<div class="onb-line"></div>
<div class="onb-step">2</div>
<div class="onb-line"></div>
<div class="onb-step">3</div>
<div class="onb-line"></div>
<div class="onb-step">4</div>
</div>
<style>
.onb-steps-bar {
display: flex;
align-items: center;
justify-content: center;
}
.onb-step {
width: 30px;
height: 30px;
border: 1px solid #D10075;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #D10075;
}
.onb-line {
height: 2px;
width: 50px;
background-color: #D10075;
}
.onb-step-completed {
background-color: #D10075;
color: white;
}
</style>
ステップ2以降のコードについて
ステップ2以降の各ステップに追加するコードについては、塗りつぶすステップ数のclass部分にonb-step-completedを追加するようにしてください。
例）ステップ2に表示する場合
<div class="onb-steps-bar">
<div class="onb-step onb-step-completed">1</div>
<div class="onb-line"></div>
<div class="onb-step onb-step-completed">2</div>
<div class="onb-line"></div>
<div class="onb-step">3</div>
<div class="onb-line"></div>
<div class="onb-step">4</div>
</div>
（以下略）