时间戳

首页 > 解决方案 > 使默认离子警报更大

ionic-framework - 使默认离子警报更大

问题描述

我正在尝试使默认的离子警报更大。我正在开发一个需要简单接触点的应用程序，并且默认警报对于我所需要的来说太小了。

我试过扩大字体以及扩大警报的宽度，但似乎没有什么能让警报变大。

有什么简单/最好的方法来做到这一点？

标签： ionic-framework

解决方案

AlertController 支持可以放置在组件的 scss 文件中的自定义类，您可以在其中进行必要的更改。

例如，在组件的 ts 文件中，您可以使用此方法创建参考自定义类“scaledAlert”的警报：

delete() {
    let confirm = this.alertCtrl.create({
      title: "Are You Sure?",
      cssClass: "scaledAlert",
      message: "this will remove image from your image gallery",
      buttons: [
        {
          text: "Cancel",
          handler: () => {
            console.log("Canceled delete");
          }
        },
        {
          text: "Confirm",
          handler: () => {
            console.log("deleting...");
            this.deleteImageFromGallery(this.image)
              .then(res => {
                console.log(res);
              })
              .catch(err => {
                console.log(err);
              });
            this.viewCtrl.dismiss();
          }
        }
      ]
    });
    confirm.present();
  }

现在，在 scss 文件中，您可以在需要缩放控制器时将类添加到样式中，这样的类会出现在您的页面或组件之后：

home-page {
    .item {
        min-height: 2rem; /* <- this can be whatever you need */
    }
    ion-label {
        margin: 0px 0px 0px 0;
    }
    .item-content {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: -12px;
        margin-bottom: -12px;
        height: 50px;
    }
}
.scaledAlert {
    transform: scale(1.5);
}

在这里，我只使用了简单的“缩放”功能，这可能需要您添加一些跨浏览器兼容的版本。但是你应该用它来实现你想要的（它在我的应用程序中运行没有问题）。

或者，您可以使用 saas 变量覆盖默认样式：https ://ionicframework.com/docs/api/components/alert/AlertController/#sass-variables

您必须在项目文件夹中的 theme\variables.scss" 中更改它们

在此处查看更多信息：https ://ionicframework.com/docs/theming/overriding-ionic-variables/

第三种选择确实是通过 devtool 检查元素的样式并尝试覆盖这些类。但我不喜欢这种方式，感觉有点hacky。

推荐阅读