css - 复选框警报 Controller - 添加 3 个按钮

Question

我用 IONIC-2 Beta 版制作了一个应用程序。我使用 Checkbox Alert Controller，并添加两个按钮“Okay”和“Cancel”，现在我需要在 Alert Controller 中再添加一个按钮。我在下面实现以再添加一个按钮。

alert.addButton('Cancel');
 alert.addButton({
   text: 'Info',
   role: 'info',
   handler: data => {
     //this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
   }
 });
 alert.addButton({
   text: 'Okay',
   handler: data => {
     this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
   }
 });

效果很好，但它会像下面那样垂直对齐，

但是，我想水平对齐它。

如果有人知道解决方案，请帮助我。

谢谢。

Answer 1

您可以使用一些 css 规则来实现。

由于按钮是通过使用 flexbox 对齐的，我们可以覆盖其中一些 css 规则，以便能够在模式中包含三个按钮而不是两个。首先，请注意我在警报中添加了自定义 css 类 (custom-alert)，因此我们的 css 规则将仅影响此警报:

let alert = this.alertCtrl.create({
      cssClass: 'custom-alert',
      ...
});

然后:

.custom-alert button.alert-button-group {
    width: 33.33%;
}

.custom-alert .alert-button-group .button-inner {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.custom-alert .alert-button-group-vertical {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row ;
}

通过将 width 设置为 33.33% 以允许按钮适契约(Contract)一行，然后将 flex-direction: row 添加到容器而不是默认的 column 值(这就是为什么在您的屏幕截图中按钮显示在列中的原因)。