About Me

header ads

Framework7 - Active State

Akinwumi Oluwanifemi November 11, 2019

Framework7 - Active State

Description

When you tap the links and buttons, they are highlighted. This is done by active state in Framework7.
  • It behaves like a native app, not like a web app..
  • It has a built-in Fast clicks library and it should be enabled.
  • The active-state class is the same as the CSS :active selector.
  • Active state is enabled by adding watch-active-state class to <html> element.
The 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;
}
The following code shows the 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;
}
Tags:

Post a Comment

0 Comments