4

我使用 IONIC-2 Beta 版本制作了一个应用程序。我正在使用复选框警报控制器，并添加两个按钮“确定”和“取消”，现在我需要在警报控制器中再添加一个按钮。我在下面实现以添加一个按钮。

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});
   }
 });

它工作得很好，但它会像下面一样垂直对齐，

它看起来像

但是，我想水平对齐它。

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

谢谢。

4

2 回答 2

5

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

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

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到容器而不是默认的列值（这就是为什么在您的屏幕截图中按钮在列显示中）。

于 2016-08-28T07:31:18.290 回答
-1

请看下面的代码

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 的更多信息，请查看此链接

于 2016-08-27T09:06:17.377 回答