Angular 如何将离子按钮集中到离子按钮标签中
我在ion工具栏中包含以下代码,但不幸的是,这些按钮不是集中的。 我试图找到另一种方法,基本上,我在离子行/离子列标签中添加了离子按钮,如下所示,现在这些按钮是集中的,但基于Galaxy S5或iPhone 5s调整大小时,我的响应行为出现了问题 我用的是离子4Angular 如何将离子按钮集中到离子按钮标签中,angular,cordova,ionic-framework,responsive-design,ionic4,Angular,Cordova,Ionic Framework,Responsive Design,Ionic4,我在ion工具栏中包含以下代码,但不幸的是,这些按钮不是集中的。 我试图找到另一种方法,基本上,我在离子行/离子列标签中添加了离子按钮,如下所示,现在这些按钮是集中的,但基于Galaxy S5或iPhone 5s调整大小时,我的响应行为出现了问题 我用的是离子4 => ionic info Ionic: ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic) Ionic Frame
=> 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>
{{quota}}pontos
先前的
普罗西莫
我试图按照下面的代码中的描述包含插槽,但是按钮消失了
<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>
{{quota}}pontos
先前的
普罗西莫
我尝试了插槽主、辅、结束和开始
我只想在使用其他小型设备(如Sansing S5或iPhone 5S)时,集中按钮,并获得正确的响应行为。
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>
先前的
普罗西莫