ステートとは、アクションの表示状態のことを指します。
通常のポップアップ等であれば、「非表示」と「表示」のステートを持ちますが、
ボタンクリックにより、見た目を複数変更するテンプレートも存在します。
※ステート = ページ　とイメージすると分かりやすいです。

ステートを利用した接客の例
初期表示 → コンテンツ表示 → 「閉じる」後の最小化表示
null

ステートを切り替える

  • 「＼」 : 非表示
  • 「数字」 : 各ステートの番号
    null

ステートの名称を変更する

  • 「表示設定」から変更したステートを選択
  • 表示されるウィンドウの上部にあるステート名（画像内1の箇所）をクリックすると編集可能になります。
    null

ステートを追加する

アクション編集画面 左のツールバーから「＋」ボタンをクリックする
null

ステートを追加した後は、カスタマイズエディタからHTML／CSS／Scriptの編集が適宜必要になります。

テンプレートを改造した場合、当該接客に関してはサポート対象外となりますのでご留意ください。

テンプレートの改造はHTMLやCSS等が実装可能な方が行うようにしてください。

ステート毎のDOMを作成する

以下、最低限必要な項目をご説明します。

HTMLの追加

    <section krt-if="state === 1">
        ... ステート1
    </section>

krt-if="state === 1" の属性＆属性値を持ったエレメントが各ステートとなります。
上記の場合は、「ステート１の時に、このsection以下のコンテンツを表示する」という意味になります。

ステートの切り替え

    <button type="button" class="btn" krt-on:click="setState(2)">次へ</button>

krt-on:click="setState(2)" の属性＆属性値を持ったエレメントが、ステート切り替えの機能を持ちます。

上記の場合は、「クリックするとステート２に切り替える」という意味になります。

ステートの削除

ステートを削除したい場合、htmlの記述しただけではアクション編集画面上のステートの表示は消えません。
アクション編集画面の表示設定 > 該当ステートを選択 > 下部のステートを削除から削除が可能です。