Menu
I have a list of items (each of which includes multiple elements) where each item is clickable and switches view. Is there a way to get the ripple effect on the whole md-item-content? I tried class="ripple" but that was not sufficient.
<md-content>
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<a ui-sref="resto({qname: resto.qname})" class="ripple">
<md-item-content id="resto{{$index}}">
...
705
By default, a ripple is activated when the host element of the matRipple directive receives mouse or touch events. Upon being pressed, a ripple will begin fading in from the point of contact, radiating to cover the host element. Each ripple will fade out only upon release of the mouse or touch.
The "md" stands for "Material Design", a specific UI look-and-feel developed by Google in 2014. These are not part of Angular itself, but part of a component library built in Angular: "a set of reusable, well-tested, and accessible UI components based on Material Design": https://material.angularjs.org/latest/
Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material. Just simply do something like this: <md-tab-group disableRipple></md-tab-group>
According to Material-UI documentation, you can disable the ripple effect globally by providing the following in your theme: import React from "react"; import Button from "@material-ui/core/Button"; import { createMuiTheme, MuiThemeProvider } from "@material-ui/core"; export default function ContainedButtons() { const ...
If you want to use ripple effect on specific elements you can use md-ink-ripple.
<div md-ink-ripple></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
