アクティブ状態

Framework7は、リンクやボタンをタップしたときに強調表示するために、「アクティブ状態」と呼ばれるメカニズムを使用しています。これは、Framework7アプリをWebアプリではなくネイティブアプリのように動作させるために行われます。

これは、CSSの:activeセレクターとほぼ同じように機能し、タップしたリンクやボタンにactive-stateクラスを追加します。唯一の違いは、このクラスが短い時間間隔後に追加されることで、ページスクロール中の誤った強調表示を防ぎます。

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

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

touch.activeStateElements アプリパラメーターで、どの要素にactive-stateクラスが適用されるかを制御できます。

入れ子になったアクティブ状態の要素がある場合があります。子要素にprevent-active-state-propagationクラスを追加することで、親要素へのアクティブ状態の設定を防ぐことができます。

<div class="card card-expandable">
  <div class="card-content">
    <!-- Tap on button will prevent setting active-state on parent card -->
    <a class="button prevent-active-state-propagation">...</a>
  </div>
</div>

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

<!-- link without active-state -->
<a href="..." class="link no-active-state">...</a>