I am facing problem to change slider bullets in Ionic v4
.swiper-pagination-bullet {
--bullet-background: red;
}
Just use
.swiper-pagination-bullet{ background-color:red;}
or
.swiper-pagination-bullet{ background:red;}
This will work fine.
Related
I think I have a very basic problem but I can't resolve it. So what I am trying to do is to implement a button in Ionic that when pressed change the style of a style. To keep it simple for now I try and change the background color of a div. However, it does not work neither does it give an error. (I use console page of browser to view changes, look for errors etc)
The code in the card.page.html page is
<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>
The code in the card.page.ts is
setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}
and that is it. Clicking on 'Some Button' button does not do anything except the logging but I am pretty sure it is not two way binding that is the issue as I tried just using for example trying with just some text as being the 'variable' I want to change and that worked fine.
I do appreciate any help :(
Thanks
You can use pre defined CSS styles for that. Something like this:
card.page.scss
#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}
card.page.html
<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>
card.page.ts
apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}
Of course this is very simple. But I hope it can put you in the right direction.
I want to have a white status bar with black font in my white theme. the problem is that the styleDefault() method which is made for it does not work. But this error only happens on Android on Ios it works perfectly. Is there any way to change the font color to black on the statusbar (only for android) or to change it with css? Or how can i make styleDefault() (dark text, for light backgrounds) work again?
Here is my code:
private setStatusBarStyle(darkTheme: boolean) {
if (darkTheme) {
this.statusBar.styleLightContent();
} else {
this.statusBar.styleDefault();
}
}
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color of a picture was yellow.See Image
This figure shows the new background color after using the pseudo-class. It is red now.
See Image
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
test(){
console.log("message");
}
For Details,check Pseudo-classes for quick apps
I am using Ionic 5 and like all Ionic frameworks in md mode all button text is all capital. So I have maintained the following in global.scss file.
ion-button{
text-transform:none!important;
}
It's working for normal buttons but the Alert buttons are still all capital. How can I set global parameters for the Alert button?
For Ionic Alert buttons use .alert-button or .alert-button-inner inside .alert-wrapper class.
.alert-wrapper {
.alert-button {
color: red;
text-transform: none;
}
}
global.scss
I am new to Moovweb. I have _mycart.scss file
.mw_iphone {
.Test {
background-color: red;
}
}
In the my_cart.ts file
$("./body") {
add_class("mw_iphone")
}
Output is: ->
<body class=" mw_iphone">
a space is getting added
Please help me to fix this issue
Thanks in Advance
I believe this is the behavior with certain old mixers, and this is fixed in newly-released mixers.
See the following examples in the Tritium Tester (click on Mixers to see the mixer version)
simple-mobile 1.0.188 (broken): http://tester.tritium.io/6503ac2acc5d98357619385aaff4a1f393fa4a33
simple-mobile 1.0.224 (good):
http://tester.tritium.io/b7c4b64ba9bec0b229c13fb4b29d3d6c2f547df9
If you can, see if changing the mixer version in Mixer.lock file fixes your issue.