Framework7-active-state

提供:Dev Guides
移動先:案内検索

Framework7-アクティブ状態

説明

リンクとボタンをタップすると、それらが強調表示されます。 これは、Framework7の_active state_によって行われます。

  • Webアプリではなく、ネイティブアプリのように動作します。
  • _Fast clicks_ライブラリが組み込まれているため、有効にする必要があります。
  • _active-state_クラスは、CSS _:active_セレクターと同じです。
  • 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;
}