Ionic4:How to Use CSSclass for Loading , It Is Doesn't Work

Ionic LoadingController css

custom this color in your src/theme/variables.scss

available variables: https://ionicframework.com/docs/api/components/loading/LoadingController/#sass-variables

$loading-ios-background: transparent;
$loading-md-background: $loading-ios-background;
$loading-wp-background: $loading-ios-background;

to remove box-shadow on android, add one more variable:

$loading-md-box-shadow: none;

or add your class to cssClass:

this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots',
cssClass: 'my-loading-class'
});

and style:

============================

UPDATE: IONIC 3

ion-loading.my-loading-class {
.loading-wrapper {
background: transparent;
box-shadow: none;
}
}

============================

IONIC 2

.loading-ios,
.loading-md,
.loading-wp {
.my-loading-class {
background-color: transparent;
box-shadow: none;
}
}

Ionic modal doesn't take class in global.scss

global.scss

ion-modal#ride-time {
--background: rgba(0, 0, 0, 0.2);

&::part(content) {
backdrop-filter: blur(6px);
width: 100%;
height: 100%;
}

app-time-picker {
background: transparent;
padding-top: 50%;
padding-block-start: 50%;
padding-left: 10%;
padding-right: 10%;
}
}

ts:

  async openTime(componentProps) {
const options: ModalOptions = {
id: 'ride-time',
keyboardClose: true,
component: TimePickerPage,
componentProps: componentProps,
};
const modal = await this.modalCtrl.create(options);
return modal;
}

the way to target has changed, now you need to use shadow parts to achieve what u want..

Ionic 3 alertCtrl custom cssClass not working

It is working fine.You just need to declare it inside the app.scss file.

app.scss

.profalert{
color:#e7333c;
background-color: red;

}

Result:

When I applied your style to my app's alert box:

Sample Image



Related Topics



Leave a reply



Submit