Как задать одинаковую ширину для ионных кнопок

Question

Привет, я очень новичок в разработке приложений для Ionic. Сейчас я изучаю ионные компоненты пользовательского интерфейса. Как мы можем разместить кнопки с одинаковой шириной, мой код ниже может помочь мне, пожалуйста

code:

<ion-content padding>
<div>
  <button outline ion-button color="secondary" (click)="save()">Save</button> 
  <button outline ion-button color="secondary" (click)="Edit()">Edit</button>
  <button outline ion-button color="secondary"(click)="Update()">Update</button>
<div>

</ion-content>

Answer 1

Вы можете использовать ионную сетку для этого.Если вы не укажете конкретную ширину столбца, она будет принимать ширину в соответствии с количеством элементов в строке.Вот что вы ищете.

<ion-grid>
    <ion-row>
        <ion-col>
           <button outline ion-button color="secondary" (click)="save()">Save</button> 
        </ion-col>
        <ion-col>
           <button outline ion-button color="secondary" (click)="Edit()">Edit</button>
        </ion-col>
        <ion-col>
           <button outline ion-button color="secondary"(click)="Update()">Update</button>
        </ion-col>
    </ion-row>
</ion-grid>

Более подробную информацию вы можете найти здесь.https://ionicframework.com/docs/components/#grid

Answer 2

<ion-content padding>
<div>
  <button outline style="width:100px" ion-button color="secondary" (click)="save()">Save</button> 
  <button outline style="width:100px" ion-button color="secondary" (click)="Edit()">Edit</button>
  <button outline style="width:100px" ion-button color="secondary"(click)="Update()">Update</button>
<div>

</ion-content>