Ionic 4 - 如何在中心对齐警报按钮？

Question

只是一个快速修复，但它如何使我的按钮居中？我正在使用 "alertCtrl.create"

在 alert ionic 文档页面中似乎也没有某种居中。

https://ionicframework.com/docs/api/alert-controller

 alertCtrl.create ({  
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

Answer 1

使用 mode md 到 ios 因为 `mode='ios' 默认情况下我们的按钮在中间。

alertCtrl.create ({  
    header: 'Invalid Input',
    mode:'ios', //by default you will get the button in center
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

Answer 2

您还可以使用 css 自定义 class 使按钮居中。当我尝试 mode: 'ios' 时，它改变了 Android 的原生外观，并显示为 iOS.

中的样子

创建提醒时，添加 css class 属性:

alertCtrl.create ({  
    cssClass: 'my-alert', // Custom css class
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

并在 global.scss

中添加 my-alert class

.my-alert .alert-wrapper {      
    .alert-button-group {
      justify-content: center;
    }
  }

Ionic 4 - 如何在中心对齐警报按钮？

Ionic4 - How to align alert buttion in center?

ionic-framework

angular

ionic4