Question

根据此http://ionicframework.com/docs/v2/api/components/loading/LoadingController/我可以将cssClass应用于loadingCtrl。

这是我的功能

presentLoadingCustom() {
    this.loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: `
        <img src="assets/images/loader/loading.gif" class="img-align" />
        `,
      cssClass:`
      //below class in inbuilt class 
       .loading-wrapper{
        background:none;
        box-shadow: none;
      }
      .img-align{
        height:80px;
      }`
    });
    this.loading.present();
  }

我应用cssClass后无法看到我的加载器，但我需要将这两个类应用于我的自定义图像加载器。

Answer 1

根据documentation cssClass选项，只接受classes for custom styles, separated by spaces，而不是将css传递给它的方式。所以更改您的presentLoadingCustom功能如下：

presentLoadingCustom() {
  this.loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `<img src="assets/images/loader/loading.gif" class="img-align" />`,
    cssClass:`loading-wrapper img-align`
  });

  this.loading.present();
}

您必须将loading-wrapper和img-align类样式定义添加到您的css文件中，而不是create LoadingController方法。

Answer 2

我遇到了同样的问题...但是，为loadingController设置此CSS的正确方法是通过以下示例

async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({

      duration: 55000,
      message: '<div><img src="../assets/imgs/plane_loading.gif" class="img-align"  /> <br />...Please wait</div>',
      spinner: null, 
      translucent: true,

      cssClass:'custom-loader-class',
      backdropDismiss: true
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed with role:', role);
  }

您需要转到global.css并添加以下示例

.custom-loader-class{
    --background:#F4B004;
    --spinner-color:#F94701;
}

如何在自定义LoadingController上应用cssClass

2 个答案: