Touch Ripple

Framework7 Material Theme comes with great an dynamic implementation of Material Touch Ripple effect.

It is enabled by default for MD theme.

You may disable it by passing touch.touchRipple: false app parameter.

Ripple Elements

By default it is enabled for the elements that match to the following CSS selector:

.ripple, .link, .item-link, .list label.item-content, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .list.accordion-list .accordion-item-toggle

which are defined in touch.touchRippleElements app parameter.

So when you touch such elements you will see so called "ripple" effect.

If you need to add "ripple" effect for any custom element you may add this element's selector to touch.touchRippleElements parameter or just add ripple class.

<a href="#" class="my-link ripple">Link With Ripple Effect</a>

Ripple Wave Color

If you want to change color of "ripple" wave on some element, then you may add ripple-[color] class to required element, where [color] class is the one of default Theme Colors, for example:

<a href="#" class="button ripple-color-red">Button With Red Ripple</a>

or you may specify it using CSS by referencing .ripple-wave element:

.button .ripple-wave {
  background-color: #ff0000;
}

or with CSS variable:

.button .ripple-wave {
  --f7-touch-ripple-color: #ff0000;
}

Disable Ripple For Specific Elements

If you want to disable ripple element for specific elements, then you may add no-ripple class to such elements:

<a href="#" class="button no-ripple">Button Without Ripple Effect</a>

iOS Touch Highlight

Framework7 v9 introduces a new Touch Highlight effect for iOS theme, providing a native iOS-like highlight on touch for container elements.

Touch Highlight is enabled by default for iOS theme and can be configured using the following app parameters:

• touch.touchHighlight - boolean, default true - enables/disables touch highlight effect for iOS theme
• touch.touchHighlightElements - string, CSS selector of elements to apply touch highlight effect on

The default elements that have touch highlight effect are container/area elements:

.toolbar-pane, .navbar .left, .navbar .right, .popover-inner, .actions-group:not(.actions-grid .actions-group), .searchbar-input-wrap, .searchbar-disable-button, .subnavbar, .searchbar-input-wrap .autocomplete-dropdown, .messagebar-area, .notification, .toast, .fab > a

To disable touch highlight for specific elements, add no-touch-highlight class:

<div class="toolbar-pane no-touch-highlight">Toolbar Pane Without Highlight</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  --f7-touch-ripple-white: rgba(255, 255, 255, 0.15);
  --f7-touch-ripple-color: var(--f7-touch-ripple-black);
}
.dark {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
}