4

IONIC-2 Beta版でひとつのアプリを作ります。私は Checkbox Alert Controller を使用しており、「OK」と「Cancel」の 2 つのボタンを追加しています。Alert Controller にもう 1 つのボタンを追加する必要があります。ボタンをもう1つ追加するために以下を実装します。

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 ルールを使用できます。

ボタンはフレックスボックスを使用して配置されているため、これらの css ルールの一部を上書きして、モーダルに 2 つではなく 3 つのボタンを含めることができます。まず、アラートにカスタム 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の値の代わりにコンテナーに追加することで、魔法が行われています (スクリーンショットでボタンが列表示になっているのはそのためです)。

于 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 に答える