web-dev-qa-db-fra.com

Ionic 2/3/4: Comment aligner le bouton dans l'en-tête sur le côté droit de l'en-tête

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>
htmlionic-frameworkangularionic2
10
blackHawk

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

27
Guillaume Le Mière

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>
5
Hari Hara Kumar

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>
4
Ved

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.

0
Ajay Gupta
<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:

  1. YOUR_FUNCTION_CALL avec l'appel de fonction à appeler lorsque vous cliquez
  2. YOUR_ICON_NAME avec le nom de l'icône

pour les icônes s'il vous plaît visitez ce site Web http://ionicframework.com/docs/v2/ionicons/

0
SABDAR SHAIK