Увеличьте количество ионных оповещений по умолчанию

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 и попытаться переопределить эти классы. Но мне это не нравится, я чувствую себя немного более хакерским.