Framework7-active-state

提供:Dev Guides
2020年6月23日 (火) 09:20時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内検索

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;
}