How can I customize the the styles of ionic refresher spinner icon in ionic 5?
I am working on an app with lightmode and darkmode. In lightmode the spinner is displayed in a dark grey on white background. So far so good. But if I switch to darkmode, it is displayed white on white. I tried to change the color f.e. with
<ion-refresher slot="fixed">
<ion-refresher-content color="primary" refreshing-spinner="crescent">
</ion-refresher-content>
or SCSS
ion-refresher {
ion-refresher-content {
--color: red;
}
}
ion-refresher {
ion-refresher-content {
color: red;
}
}
and setting the variable to
$refresher-icon-color: red;
I would really appreciate some help.
Thank you!
you need to some CSS to get this done. i have added a CSS code below you can add this in your global.css file and you can remove the color option from ion-refresher-content color="primary"
//add this css code in your global.scss file which in your src folder
ion-refresher.refresher-native ion-spinner{
color: red!important;
}
Related
Customize ion-checkbox background & border in IONIC 4
My code:
.checkbox-icon {
background: none !important;
border: none !important;
}
This will work.
<ion-checkbox color="primary"></ion-checkbox>
https://beta.ionicframework.com/docs/api/checkbox/#css-custom-properties
https://ionicframework.com/docs/api/checkbox
I'm trying to change the color and the size of the letter inside the ion-toolbar but without success, what I've tried so far:
ion-toolbar {
--background: var(--custom-primary); //works
--color: #FFFFFF; //works letters, not icon
ion-buttons {
font-weight: bold; //works
--icon-font-size: 10px !important;
}
ion-back-button {
--icon-font-size: 30px !important;
}
}
You can directly style your toolbar in the template. E.g.:
<ion-toolbar color="green">
...
</ion-toolbar>
Check out these docs https://ionicframework.com/docs/theming/advanced#themes. Theming ionic core components like the ion-toolbar is a little different.
How to apply background color for a full page in ionic
I used a code HTML
<ion-content padding class="bg.style">
in css
.bg-style {
background-color: #dddddd;
}
but I didn't get output please help me
try doing this
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.
Apply the background color to the .item-content element, as by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working.demo
I am trying to remove the border under the ion-refresher element that appears when user pulls down. I have tried no-border no-shadow and custom css with !important but nothing seems to remove it, how can I remove the line under the ion-refresher that appears when a user pulls down
<ion-refresher (ionRefresh)="doRefresh($event)"
no-border no-shadow style="border:none !important; box-shadow: none !important">
<ion-refresher-content no-border no-shadow style="border:none !important">
</ion-refresher-content>
</ion-refresher>
You need to remove border-top. Add this to the css of your page:
.has-refresher>.scroll-content {
border-top: 0;
}
The ion-refresher does not have the border. The border is part of ion-content > div.scroll-content
How do you customize the background color of the ModalComponent in angular_components for dart?
Question pulled from here: https://github.com/dart-lang/angular_components/issues/187
Changing the dialog colors for modals and other dialogs is as simple as changing the CSS. For example:
CSS:
.blue-dialog {
background-color: blue;
}
HTML:
<material-button (trigger)="showBasicDialog = true"
[disabled]="showBasicDialog"
raised>
Open Basic Dialog
</material-button>
<modal [visible]="showBasicDialog">
<material-dialog class="blue-dialog">My Blue Dialog</material-dialog>
</modal>