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

使用模式 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 自定義類使按鈕居中。 當我嘗試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;
}

並在您的global.scss中添加my-alert類

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