Framework7-アクティブ状態

説明

リンクとボタンをタップすると、それらが強調表示されます。これは、Framework7のアクティブ状態によって実行されます。

  • Webアプリではなく、ネイティブアプリのように動作します。
  • 高速クリックライブラリ組み込まれているため、有効にする必要があります。
  • アクティブ状態のクラスは、CSSと同じでアクティブ:セレクタ。
  • アクティブ状態は、watch-active-stateクラスを<html>要素に追加することで有効になります。

次のコードは、CSSスタイルのアクティブ状態に使用されます-

/* Usual state */
.my-button {
   color: red;
}

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

次のコードは、アクティブ状態または高速クリックが無効になっている場合のフォールバックの互換性を示しています-

/* Usual state */
.my-button {
   color: red;
}

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

/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
   color: blue;
}