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

Question

只是快速修复，但如何使按钮居中？我正在使用“ alertCtrl.create”

在警报离子文档页面中似乎也没有居中。

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

在iOS上使用md模式，因为默认情况下`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自定义类将按钮居中。当我尝试mode: 'ios'时，它改变了Android的本机外观，并像在iOS中一样显示。

创建警报时，添加css类属性：

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

并在您的my-alert中添加global.scss类

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