Active State

优质

小牛编辑

135浏览

2023-12-01

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

如果你希望能向下兼容（当 Active state 或者 Fast clicks 被禁用的时候）你可以这样写：

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