HTML

アクション実装における、HTML タブの挙動や注意点を列挙します。
特殊な HTML 属性は HTML ディレクティブ - Developer Portal を参照してください。

Simple CSS Modules

ID やクラスは CSS を指定するとアクション固有の値に変換されます。
これにより、汎用的な値を指定しても外部からの影響を受けにくくなります。

※[shortenId] には各アクションの ID が入ります。

ステートを切り替える

setState メソッドを利用してステートを切り替えられます。

<!-- e.g. -->
<div class="wrapper">
    <section krt-if="state == 1">
        <button type="button" class="btn"
                krt-on:click="setState(2)"
            >
            次へ
        </button>
        <p>State 1</p>
    </section>

    <section krt-if="state == 2">
        <p>State 2</p>
    </section>
</div>

アクションを閉じる

.karte-close を指定した要素をクリックするとウィジェットを閉じられます。
e.g. <button type="button" class="btn karte-close">閉じる</button>

注意： CSS で karte-close にスタイルを適用すると動作しなくなります。