Saturday, February 18, 2017

Framework7 - Active State

Description

To highlight links and buttons when you tab them, it will be done by active state in Framework7.
  • It behaves like a native app, not like a web app.
  • It has built-in Fast clicks library and it should be enabled.
  • The active-state class is same as CSS :active selector.
  • Active state is enabled by adding watch-active-state class to <html> element.
Following code is used for active state in CSS style:
/* Usual state */
.my-button {
    color: red;
}
/* Active/tapped state */
.my-button.active-state {
    color: blue;
}
Following code shows fallback compatibility, when Active state or Fast clicks is disabled:
/* 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;
}

No comments:

Post a Comment