I created a custom styles to override ListItemButton css but can't remove the ripple effect when button is clicked. I found out that the api to call is from ".MuiButtonBase-root" but even after setting "disableRipple" to True, the ripple effect still persists.
Related
There are a couple examples of how to create a ripple effect in TailwindCSS for click:
https://tailwind-elements.com/docs/standard/methods/ripple/#!
https://codepen.io/vituja1/pen/oNWzNwq
And basically it's about creating an element that grows inside the boundary of the parent button and vanishes.
targetElement.addEventListener('click', e => {
// create an element, append it to the target, let it grow, and then remove it
});
However, I want to create the ripple that acts on hover, not on click. As you can see here:
https://www.templatemonsterpreview.com/demo/187467.html
How can we achieve this effect in tailwind?
im trying to get a modal ios effect but when i use a normal modal i cant get it,
this is the effect with black border in the top
Any ideas how to get this effect with ionic react ?
I found the solution
you need to create this variable
const pageRef = useRef<HTMLElement>(null);
then make the mode propertie in modal = 'ios'
in your curren page put this reference
<IonPage ref={pageRef} >
...
...
Last step is in the modal properties put this
presentingElement={pageRef.current!}
more info here
https://ionicframework.com/docs/api/modal#swipeable-modals
I am using materialize-css library in angular. Along with the materialize-css I am using materialize-stepper library that is based on the materialize-css.
MaterializeCSS uses .waves-effect CSS class to provide ripple effect on buttons, a tag and on all other clickables.
materialize-stepper also uses the .waves-effect. When I click on the node with .waves-effect class it appends a div having the ripple effect. Problem is on the next click it adds one new div with ripple effect. So it makes the clickable button or node with dark background (step 2) as this does not remove existing div.
what could be the possible issue?
I am using material ui for react. So When the user clicks on the button(from material ui), there is a ripple effect seen, but it fades away soon, I would want that the ripple effect fill up the button with a different color.
Please give suggestions how could this be achieved.
Thanks.
Check the TouchRipple component's code, it's got a prop called color. All material-ui components use the TouchRipple for the ripple effect. Now you want to control the color of this prop for Buttons. Material UI offers several different kinds of buttons. You can follow the code of the button you want to use, you'll notice they use EnhancedButton which then uses TouchRipple. EnhancedButton exposes a prop call touchRippleColor which can be used to specify the color of the ripple effect.
Is there any working example of toggling or removing CSS class from ExtJS 4.2 component, xtype: button in particular?
I have found and tried a method from API, but no effect. If the method is working for you, would you explain what I did wrong?
button.removeCls("sample-button-over");
You have to add both mouseover and mouseout eventsto button. On mouseover, check the condition whether it is pressed or not, if not pressed add the CSS class, and remove the class on mouseout. It should work