Comment puis-je aligner avec le côté droit, le bouton est affiché à gauche de l'en-tête sans icône de composition.
Voici ce que je fais:
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
Ionic 2/Ionic 3 a quelque chose pour cela, il suffit de regarder le code suivant:
<ion-header>
<ion-navbar primary>
<ion-buttons start>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
My Page
</ion-title>
<ion-buttons end>
<button (click)="myFunction()" ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
L'avantage de résoudre votre problème de cette manière est que votre barre de navigation respectera automatiquement les consignes relatives à Android/ios/windows. Vous améliorez ainsi la qualité de votre application.
Plus d'informations sur les lignes directrices:
Android: https://developer.Android.com/guide/practices/ui_guidelines/index.html
iOS: https://developer.Apple.com/ios/human-interface-guidelines/
Windows: https://developer.Microsoft.com/en-us/windows/design
ionic 4 ion-navbar est remplacé par ion-back-button et dans Ionic 4 bouton précédent comme
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
<ion-button slot="secondary">
<ion-icon name="search"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
Vous pouvez ajouter un bouton à droite dans l'en-tête dans ionic 2.0
<ion-navbar *navbar>
<ion-title>
TODO APP
</ion-title>
<ion-buttons end>
<button ><ion-icon name="home"></ion-icon></button>
</ion-buttons>
</ion-navbar>
Vous pouvez ajouter la classe css de votre icône personnalisée comme ceci
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
OU
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
OU
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
<ion-icon name="custom"></ion-icon>
J'ai résolu mon problème avec ceci:
ion-buttons {
order: 10
}
Essayez de l'ajouter à votre feuille de style
Note: Je l'ai utilisé dans ionic2.
<ion-toolbar color='primary'>
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>TODO APP</ion-title>
<ion-buttons start>
<button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
<ion-icon name='YOUR_ICON_NAME'></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
Remplacer:
pour les icônes s'il vous plaît visitez ce site Web http://ionicframework.com/docs/v2/ionicons/