Question

我想使用cssClass更改离子加载样式，我的代码如下：

loading.page.ts：

@Component({
    selector: 'app-loading',
    templateUrl: './loading.page.html',
    styleUrls: ['./loading.page.scss'],
})
export class LoadingPage {

constructor(public lLoadingController: LoadingController) { }

async  presentCunstomLoading() {
    const loading = await this.lLoadingController.create({
        spinner: 'hide',
        duration: 500000,
        content: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class'
    });
    return await loading.present();
}
}

loading.page.scss ::

`

app-loading {
  .custom-class {
    background: #e0b500;
  }

}`

loading.page.html：

<ion-content padding>
    <ion-button (click)="presentModal()">open modal</ion-button>
</ion-content>

这是什么问题？任何人都可以帮助我。我很困惑。谢谢。

Answer 1

theme / variables.scss

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

我不知道为什么，但是它可以在Ionic4中使用。

如果您在loading.page.scss中编写，则无法使用。

Answer 2

我正在使用IONIC 4。

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null,
  message: '<ion-img src="assets/gif/loading.gif"></ion-img>',
  cssClass: 'custom-loading'
});
await this.myLoading.present();

位于theme / variables.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: transparent !important;
    box-shadow: none !important;
  }
}

你去了。现在，您将具有透明背景的自定义加载。

Answer 3

Rano Paimin，您的解决方案不起作用，所以我会改善您的答案：

我正在使用IONIC 4

this.myLoading = await this.loadingCtrl.create({ 
  spinner: null, -> here you can add others spinners ou set null 
  remove this attribute -> message: '<ion-img src="assets/gif/loading.gif"></ion-img>', 
  cssClass: 'custom-loading'
});
await this.myLoading.present();

位于theme / variables.scss

ion-loading.custom-loading {
  .loading-wrapper {
    background: #ffffff url("assets/gif/loading.gif") no-repeat center;
  }
}

如果要更改尺寸，可以更改以下属性：

  background-size: 100px 100px; /* to change dimension of background */
  padding-top: 36px; /* padding top of white square */
  padding-bottom: 36px; /* padding bottom of white square */
  border-radius: 0.8rem; /* border-radius white square */

希望对您有所帮助。

IONIC4：如何使用cssClass进行加载，这是行不通的

3 个答案: