如何在自定义 LoadingController 上应用 cssClass

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 后看不到我的加载器，但我需要将这两个 class 应用到我的自定义图像加载器。

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 文件中，而不是 LoadingController 的 create 方法中.

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

how to apply cssClass on custom LoadingController

sass

loading

ionic2

angular