ウィジェット 基本編 - ステートと変数について

ウィジェットの基本的な設定方法をご説明します。

ステートとは


  • ウィジェットには表示状態(=ステート)という概念があります
    • 通知タイプ、カードタイプと同様に単体ステートでも使用可能ですし、複数指定し、ユーザーのアクションによってステートを切り替えることが可能です。
  • ステートを設定する
    • エディタ上部から下記マークをクリックして、ステートを必要分追加します。

__________2017-05-22_14.54.14.png

  • ステート毎のDOMを作成する
    • HTML、CSS、 Scriptそれぞれ下記のように指定してください。

HTML

<div krt-if="state==1" class="karte-temp-whole">
    <div> ステート1 </div>
</div>

krt-if="state==1"の記述が重要です。
要約すると、ステートが1に等しい時にそのDOMを表示するという記述になります。
「ステートの設定」で指定したステートがstateに該当するので、ステート切り替えに応じて表示が替わります。

※内部的にはstateはウィジェット内の動的変数なので、動的変数がDOMの表示/非表示にバインドされています

 

CSS

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

任意設定です。適切なスタイルを適用してください。特に変更しないのであれば、変更しなくて問題ございません。

.karte-temp-wholeはウィジェットのステートのDOM最外部に指定したクラス名

 

Script

widget.show();

widget.show();を実行することで、ウィジェットが表示されるようになりますが、設定しないとウィジェットは表示されません。
適当なsetTimeout()内でwidget.show();を実行すると、表示タイミングを調整することができます。

 

ウィジェットでの変数の利用について


  • HTML・CSSへの埋め込み変数
  静的変数(VARIABLES)
HTML #{変数名}
CSS #{変数名}