Active State

Framework7 uses so called “active state” to highlight links and buttons when you tap them. It is done to make Framework7 app behave like native app, not like a web app.

It works almost in the same way as CSS :active selector, it adds active-state class to links and buttons when you tap them. The only difference is that it adds this class after small time interval, this prevents false highlights during page scrolling.

So when you write your CSS styles you should write active states like:

  1. /* Usual state */
  2. .my-button {
  3.     color: red;
  4. }
  5. /* Active/tapped state */
  6. .my-button.active-state {
  7.     color: blue;
  8. }

You can control which elements will receive active-state class in touch.activeStateElements app parameters.

There are some situations when you may have nested active-state elements. You may prevent setting active state on parent element by adding prevent-active-state-propagation class to child active-state element:

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

To disable setting active-state class on element itself (and on its children) we need to add no-active-state class to such element:

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

← Template7

Tap Hold Event (Long Tap) →