[英]Ionic LoadingController css
我正在使用 Ionic3,并且有一个LoadingController
。
this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots'
});
题
是否可以去除点后面的白色背景? 即只是在背景上有点。
正如您从Ionic 文档中看到的,有一个cssClass
选项可用于进行自定义样式。 但是,我不确定将什么 css 应用于LoadingController
。
更新
将以下内容添加到variables.scss
:
$loading-md-background: transparent;
但是我如何移除这个盒子?
在src/theme/variables.scss
自定义此颜色
可用变量: 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;
要在 android 上删除 box-shadow,再添加一个变量:
$loading-md-box-shadow: none;
或将您的课程添加到cssClass
:
this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots',
cssClass: 'my-loading-class'
});
和风格:
============================
更新:离子 3
ion-loading.my-loading-class {
.loading-wrapper {
background: transparent;
box-shadow: none;
}
}
============================
离子 2
.loading-ios,
.loading-md,
.loading-wp {
.my-loading-class {
background-color: transparent;
box-shadow: none;
}
}
Tiep Phan 的解决方案对我不起作用,因此请参阅下面的示例以了解 Ionic 版本 3.19.0 的工作解决方案:
const LOADING = this.loadingCtrl.create({
cssClass: 'transparent',
});
ion-loading.transparent {
.loading-wrapper {
background: transparent;
box-shadow: none;
.spinner-crescent circle {
stroke-width: 8px;
}
}
}
请注意,我有选择地增加了 Android 加载微调器的笔触宽度,以使其更加明显。
这对我适用于 Android 和 iOS 的 Ionic 4 和 5(使用mode:'md' ):
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { LoadingOptions } from '@ionic/core';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
constructor(public loadingController: LoadingController) { }
async present() {
// Dismiss all pending loaders before creating the new one
await this.dismiss();
let options: LoadingOptions = {
message: '<ion-img src="/assets/imgs/spinner.svg" alt="loading..."></ion-img>',
cssClass: 'custom-loading',
translucent: true,
showBackdrop: true,
spinner: null,
mode: 'md',
keyboardClose: true
};
await this.loadingController
.create(options)
.then(res => {
res.present();
});
}
/**
* Dismiss all the pending loaders, if any
*/
async dismiss() {
while (await this.loadingController.getTop() !== undefined) {
await this.loadingController.dismiss();
}
}
}
然后在 global.scss 中:
.custom-loading {
--background: none;
.loading-wrapper{
box-shadow: none !important;
-webkit-box-shadow: !important;
}
}
// this how to apply custom style or replace the loading icon with your desired one
//.ts
this.loading = this.loadingCtrl.create({
spinner: 'hide',
cssClass: 'custom-spinner',
// message:"hello",
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box">
<img src="assets/img/LOADING-.gif" style="max-width: 100%;
width: 140px !important;"/>
</div>
</div>`,
// duration:
})
//app.css
.custom-spinner {
.loading-wrapper{
background: transparent !important;
box-shadow: unset !important;
}
}
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
constructor(public loadingController: LoadingController) { }
isLoading: boolean = false;
async present() {
this.isLoading = true;
return await this.loadingController.create({
spinner: null,
duration: 5000,
message: '<ion-img src="assets/images/loader-banorte.gif" ></ion-img>',
translucent: false,
cssClass: 'banorte-loading',
showBackdrop: true,
mode: 'md',
keyboardClose: false,
backdropDismiss: true
}).then(a => {
a.present().then(() => {
console.log('presented');
if (!this.isLoading) {
a.dismiss().then(() => console.log('abort presenting'));
}
});
});
}
async dismiss() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('dismissed'));
}
}
加载Service.service.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.