Question

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

我曾尝试扩大字体并扩展警报的宽度，但似乎并没有使警报变大的事实。

有什么简单/最好的方法吗？

Answer 1

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检查元素的样式并尝试覆盖这些类。但是我不喜欢这样，感觉有点。

Answer 2

如果以组件SCSS文件编写，则某些警报样式不会更新。样式需要写在全局scss文件中。

放大默认的离子警报

2 个答案: