ステートの表示順番を変更するにはどうしたらいいですか?

ウィジェットタイプのテンプレートは複数のステート(表示状態)を持つことができ、一つのステートの表示全体または一部(ボタンなど)をクリックした時に、別のステートを表示させるといった挙動を取ることができます。

ステートの概念と追加方法についてはこちらのサポートサイトをご覧ください。

 

ステートの表示順番を編集するには以下の記述の箇所を編集してください。

krt-on:click="setState(n)"

要素をクリックした時に、表示させる次のステート番号をnに指定します。

例えば、

<div class="karte-temp-state1" krt-if="state==1" krt-on:click="setState(2)">

となっている場合、「ステート1の時にkarte-temp-state1の要素が表示され、クリックするとステート2が表示される」という挙動となります。

 

なお、

krt-if="state==n"

の記述がある要素が、nステートに表示されます。nを表示させたい希望のステート番号に変更してください。

例えば、上記の例を以下のように編集すると

<div class="karte-temp-state1" krt-if="state==2" krt-on:click="setState(1)">

「ステート2の時にkarte-temp-state1の要素が表示され、クリックするとステート1が表示される」という挙動に変更されます。
もともとステート1に表示されていた要素がステート2に表示されるようになりますので、ステート1のHTML部分も併せて編集をすれば、ステート1と2の表示内容を入れ替えることができます。