ウィジェット - 最小化タイプ(複数ステートあり)

ウィジェットで複数ステートを持ったものを使用したい場合の使用例を、下記のようなレイアウトのものを元に説明します。

開閉式雛形(PC/モバイル兼用)

Screenshot3.pngScreenshot4.png

ビジュアルタブ内の表示位置は通知タイプの切り替わりのみであれば共に、中央以外を選択してください。
通知タイプからカードタイプの切り替わりであれば、2番目の表示位置を中央に選択してください。

 

HTML

<div class="karte-temp-state1" krt-if="state==1" krt-on:click="setState(2)">
    <div class="karte-temp-close karte-close karte-temp-hover" krt-if="#{state1_close_use}"></div>
    <div class="karte-temp-btn karte-temp-hover">#{state1_text}</div>
</div>
<div class="karte-temp-state2" krt-if="state==2">
    <div class="karte-temp-state2-inner">
        <div class="karte-temp-close karte-temp-hover" krt-if="#{state2_close_use}" krt-on:click="setState(1)"></div>
        <a class="karte-temp-link" href="#{state2_link}">
            <div class="karte-temp-mainvisual">
                <img src="#{state2_mainvisual}" alt="#{state2_mainvisual_alt}">
            </div>
            <div class="karte-temp-wrap">
                <div class="karte-temp-title">#{state2_title}</div>
                <div class="karte-temp-description">#{state2_description}</div>
                <div class="karte-temp-image">
                    <img src="#{state2_image}" alt="#{state2_image_alt}">
                </div>
                <div class="karte-temp-btn karte-temp-hover">#{state2_btn_text}</div>
            </div>
        </a>
    </div>
</div>

krt-if="state==1"の記述がある箇所が、ステート1の記述エリアになります。
ステート1のエリアをクリックし、ステート2に遷移するにはkrt-on:click="setState(2)"と記 述してください。
複数(2つ以上)のステートを持つ場合、遷移したいステート数 “n”を記述してください。 krt-on:click="setState(n)"

krt-if="state==2”の記述がある箇所が、ステート2の記述エリアになります。

複数ステートを設定する場合、下記のような設定を行ってください。

  • 複数ステートを設定する
    • エディタ上部から「ステートを追加」を選択して、必要分ステートを追加します。

ステートを追加後、HTML内に下記のように追記してください。
ステート間を遷移するkrt-on:click="setState(n)"の記述に関しては、必要な箇所に適宜指定してください。

<div krt-if="state==n">
    〜 略 〜
</div>

CSS

.karte-temp-whole {
    min-width: 100%;
    min-height: 100%;
}

任意設定です。適切なスタイルを適用してください。

 

Script

widget.show();

widget.show();を実行することで、ウィジェットが表示されるようになりますが、設定しないとウィジェットは表示されません。