Question

我使用IONIC-2 Beta版制作一个应用程序。我使用了Checkbox Alert Controller，并添加了两个按钮＆＃34; Okay＆＃34;并且＆＃34;取消＆＃34;，现在我需要在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％以允许按钮放入同一行，然后将flex-direction: row添加到容器而不是列默认值（这就是屏幕截图中按钮位于列显示中的原因）。

Answer 2

请查看以下代码

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      },
      {
        text: 'get',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

要获得水平按钮，我们需要一个按钮内的所有按钮   阵列

但在你的情况下，你有3个不同的阵列。

有关AlerControll的详细信息，请查看此link

复选框警报控制器 - 添加3个按钮

2 个答案: