アクティブステート

Framework7では、リンクやボタンをタップするとハイライトされる、いわゆる「アクティブステート」を使用しています。これは、Framework7アプリをWebアプリのようにではなく、ネイティブアプリのように動作させるために行われます。

これは、CSSの :active セレクタとほぼ同じように動作し、リンクやボタンをタップしたときに active-state クラスを追加します。唯一の違いは、このクラスがわずかな時間の後に追加されることで、ページスクロール中の誤ったハイライトを防ぎます。

そのため、CSSスタイルを記述する際には、アクティブステートを以下のように記述する必要があります。

/* Usual state */
.my-button {
    color: red;
}
/* Active/tapped state */
.my-button.active-state {
    color: blue;
}

どの要素がactive-stateクラスを受け取るかは、touch.activeStateElements app parametersで制御できます。

active-stateの要素が入れ子になっている場合もあるでしょう。子のactive-state要素にprevent-active-state-propagationクラスを追加することで、親要素にactive-stateが設定されるのを防ぐことができます。

<div class="card card-expandable">
  <div class="card-content">
    <!-- ボタンをタップすると、親カードにactive-stateが設定されなくなります。 -->
    <a class="button prevent-active-state-propagation">...</a>
  </div>
</div>

要素自体（およびその子）にactive-stateクラスを設定しないようにするには、そのような要素にno-active-stateクラスを追加する必要があります。

<!-- active-stateのないリンク -->
<a href="..." class="link no-active-state">...</a>