I Implemented mat-spinner in my project, but it only has few configurable changes like Color, mode of spinning. I want to include Image Icon which is the Logo of a brand/Company inside the spinner, how can i achieve it ?
Below is the Stackblitz link:
https://stackblitz.com/angular/lmgppgejqxdv
It has mode and color change but how do i include any image to fit inside the progress spinner ?
you can access the background layer of the spinner using:
.mat-progress-spinner svg {
background: red;
}
Note however that the svg is subject to transforms, so the background may end up being rotated as well.
Related
My app features a progress bar which background and thumb Image need to be changed. I found that the thumb image could be changed via a constant in the designer but which I could not find in the #Constants paragraph of the page on CSS selectors.
I tried to change the slider UIID to the one I created in the css file like this
MyStyle {
background-image: url(pics/whatever.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
}
but only the image appears I can't see the progress indicator (eg mySlider.setProgress(50)).
Can it be done and if so how ?
Please note : I read mission 2 of CN1 bootcamp about CSS styling but could not find slider styling.
EDIT September 18th 2017
Following Shai's advice, I set the MyTheme and MyThemeFull with different background images. Indeed MyTheme is always drawn completely in the background and MyThemeFull is drawn bit after bit while the progress is increasing. So when the progress reaches 100% MyThemeFull background image is shown completely.
The cursor (thumb) image can be set via Slider.setThumbImage().
Any help or links to resource material appreciated ;-)
Slider has two UIID's: Slider & SliderFull. Which are drawn one on top of the other to produce the slider effect.
If you change the UIID they become MyStyle & MyStyleFull and you need to customize both.
I have a button on which I set the background image using css, and then sometimes need to change it dynamically in the code. But if I change it, I see both images, one on top of the other.
Here's my css:
ExpertVideoButton{
cn1-derive: Label;
background-image: url(images/play-video.png);
cn1-source-dpi: 180;
cn1-background-type: cn1-image-scaled-fit;
}
And my code:
mStateMachine.findViewVideoBtn(f).getAllStyles().setBgImage(mStateMachine.res.getImage("no_video.png"));
The previous background image doesn't get replaced by the new one. Any ideas on how to solve this?
Update
The original background image wasn't actually being set from the css - there was a css style that was unused, and the image was being set from the code, twice. The first time I had made it the Label's icon, and the second time its background image. Unfortunately, this was a case of me having trouble reading my own code!
Since you use transparent images you need to set the bgTransparency of the style to transparent (0) in the CSS (not sure how you do it there).
I want to apply the following effect to the background. Right now, when popup come up, the background fades a bit. I am trying to make the background blur. I read that the .popup-container class is the outside background of the popup. For example changing background-color of the .popup-container to red makes the background red. I want to make the text or any content that is behind the popup blur .
I am trying to add blur but it does not seem to do anything. Can you please help? http://codepen.io/anon/pen/gPbQNZ
.my-popup.popup-container {
filter: blur(2px);
}
What you want to do is conditionally apply a class, using ng-class, to your entire view. Whether it's your ion-content or just some div or whatever. Then you can set the properties of this new class to blur just like you have above with the .popup-container.
The condition under which this class gets applied should be whenever your popup is open.
Example here
I have made a round button and i have set a background image on it. I want it to display the other background button image while hover over it.
You can do that using style sheets:
QPushButton:hover { color: white }
See more about pseudo states here.
I want to give some color to the area where they are toolbox buttons with icons (light grey on picture). Please help in determining what is a parameter style sheet?
If I understand correctly, you are trying to change the background color of the toolbar area.
Suppose I have a mainwindow with a toolbar called mainToolBar. Here is what I did :
ui->mainToolBar->setStyleSheet("QWidget { background : red; } QToolButton { background : green; }");
The first part of the stylesheet will change the background color of the toolbar where there is no toolbuttons.
The second part of the stylesheet will change the background color of the toolbuttons.
Note : I tested the code snippet above on Windows, I suppose it should work on a Mac too, but I cannot guarantee.