Active State

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

Active state is a part of built-in Fast Clicks library, so Fast Clicks should be also enabled.

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.

When Active state is enabled it is also adds watch-active-state class to <html> element.

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

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

If you want to provide fallback compatibility (when Active state or Fast clicks are disabled) you may also add:

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