Как централизовать ионную кнопку в метку ионной кнопки - PullRequest
Новая
       21

Как централизовать ионную кнопку в метку ионной кнопки

1 голос
/ 12 апреля 2019

Я добавляю в панель инструментов ion следующий код, но, к сожалению, кнопки не централизованы. Я попытался найти другой способ, и в основном я добавил ионные кнопки внутри тегов ion-row / ion-col, как показано ниже, и теперь кнопки централизованы, но при изменении размера на основе Galaxy S5 или iPhone 5s у меня возникли проблемы с отзывчивым поведением. .

Я использую Ionic 4. 

=> ionic info

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : android 8.0.0, browser 6.0.0, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v8.12.0 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2 Build version 10E125

Код: 

<ion-header>
    <ion-toolbar>
        <ion-title align="center" [title]="quota">{{quota}} pontos</ion-title>
    </ion-toolbar>
    <ion-toolbar>
        <ion-item class="calendar">
            <ion-row>
                <ion-col align-items-center="true">
                    <ion-buttons>
                        <ion-button class="btncalendar" (click)="previous()">
                            Anterior
                            <ion-icon slot="start" name="rewind"></ion-icon>
                        </ion-button>
                        <ion-button class="btncalendar">
                            <ion-icon slot="end" name="calendar"></ion-icon>
                            <ion-datetime #myPicker display-format="DD/MM/YYYY" [value]="screenDateTime"
                                          (ionChange)="updateDate(myPicker.value)" [(ngModel)]="value"></ion-datetime>
                        </ion-button>
                        <ion-button class="btncalendar" (click)="next()">
                            Próximo
                            <ion-icon slot="end" name="fastforward"></ion-icon>
                        </ion-button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
        </ion-item>

Я попытался включить слот, как описано в коде ниже, но кнопки исчезли. 

<ion-header>
                <ion-toolbar>
                    <ion-title align="center" [title]="quota">{{quota}} pontos</ion-title>
                </ion-toolbar>
                <ion-toolbar>
                    <ion-item class="calendar">
                        <ion-row>
                            <ion-col align-items-center="true">
                                <ion-buttons slot="primary">
                                    <ion-button class="btncalendar" (click)="previous()">
                                        Anterior
                                        <ion-icon slot="start" name="rewind"></ion-icon>
                                    </ion-button>
                                    <ion-button class="btncalendar">
                                        <ion-icon slot="end" name="calendar"></ion-icon>
                                        <ion-datetime #myPicker display-format="DD/MM/YYYY" [value]="screenDateTime"
                                                      (ionChange)="updateDate(myPicker.value)" [(ngModel)]="value"></ion-datetime>
                                    </ion-button>
                                    <ion-button class="btncalendar" (click)="next()">
                                        Próximo
                                        <ion-icon slot="end" name="fastforward"></ion-icon>
                                    </ion-button>
                                </ion-buttons>
                            </ion-col>
                        </ion-row>
                    </ion-item>
                    <ion-item class="header">
                        <ion-grid>

Я пробовал слот основной, дополнительный, конец и начало.

Я просто хочу централизовать кнопки и правильно реагировать при использовании других небольших устройств, таких как Sansing S5 или iPhone 5S.

1 Ответ

2 голосов
/ 12 апреля 2019

justify-content-center будет горизонтально центрировать ваши кнопки. 

<ion-buttons justify-content-center>
    <ion-button class="btncalendar">
        Anterior
        <ion-icon slot="start" name="rewind"></ion-icon>
    </ion-button>
    <ion-button class="btncalendar">
        <ion-icon slot="end" name="calendar"></ion-icon>
        <ion-datetime #myPicker display-format="DD/MM/YYYY"></ion-datetime>
    </ion-button>
    <ion-button class="btncalendar">
        Próximo
        <ion-icon slot="end" name="fastforward"></ion-icon>
    </ion-button>
</ion-buttons>
...