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?
Related
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
How can I change JavaFX alertbox background without using css strings?. I mean something like Node.setStyle(-fx-background-color: red;)
I am busy developing a mobile app in Ionic v4 using Angular as my front end. I am currently using animate.css to animate some of the transitions. I would like one div to fade out and the other fade in once data has been loaded on the backend.
So I have gotten the switching part right, using an *ngIf on each of the div's to check when the data has been pulled through. Using animate.css I can get the second div to fade in by applying animated fadeIn to the class attribute of the div.
So the only part left is to fade out the first div, now I have tried conditionally setting the classes for the div using: [ngClass]="(information != null) ? 'animated fadeOut' : ''" but it would seem to me that this only gets evaluated once when the view renders and never again, unlike *ngIf.
Does anyone know a way I can conditionally apply a class on a div when the evaluated expression is true, that will be checked throughout the lifecycle of the view such as *ngIf?
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.
I want to implement an image/div drag functionality like the one in the tinymce,
when the user click on the image, its border are selected and one can move the image/div around in the editor, and in the meanwhile it generate inline css as well..
Thanks...
You probably want something like jQuery UI's draggables, which allows you to make dragging movements with your mouse which will alter the dragged element's CSS accordingly. Use the start and stop events if you want to change the border color when it is being dragged.