webentwicklung-frage-antwort-db.com.de

Ionic 2/3/4: Schaltfläche zum Ausrichten in der Kopfzeile rechts neben der Kopfzeile

Wie kann ich mich auf der rechten Seite ausrichten? Die Schaltfläche wird links neben der Kopfzeile angezeigt, ohne dass das Symbol zum Erstellen erscheint.

Folgendes mache ich:

<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 hat etwas dafür, schauen Sie sich den folgenden Code an:

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

Wenn Sie Ihr Problem auf diese Weise lösen, haben Sie den Vorteil, dass die Navigationsleiste automatisch die Android/ios/windows-Richtlinien beachtet. So verbessern Sie die Qualität Ihrer App.

Weitere Informationen zu den Richtlinien:

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 wird durch ion-back-button und in ionic 4 back-button ersetzt 

<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

Sie können die Schaltfläche rechts in der Kopfzeile in ionic 2.0 hinzufügen.

<ion-navbar *navbar>
    <ion-title>
        TODO APP
    </ion-title>
    <ion-buttons end>
        <button ><ion-icon name="home"></ion-icon></button>
    </ion-buttons>
</ion-navbar>

Sie können die CSS-Klasse Ihres benutzerdefinierten Symbols wie folgt hinzufügen 

css

.ion-ios-custom:before {
    background-image: url("image-icon.png");        
 }

ODER

.ion-ios-custom:before {       
   content: "\f439"; /* your font code */
 }

ODER

.ion-ios-custom:before {
   content: url("image-icon.png") !important;
}

html

<ion-icon name="custom"></ion-icon>
4
Ved

Es ist Arbeit für mich.

Ionische 4 - Header

enter image description here

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>
3
Abdullah Pariyani

Ich habe mein Problem damit gelöst:

ion-buttons {
    order: 10
}

Versuchen Sie, es Ihrem Stylesheet hinzuzufügen

Hinweis: Ich habe dies in ionic2 verwendet.

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>

Ersetzen:

  1. YOUR_FUNCTION_CALL mit dem Funktionsaufruf, den Sie beim Klicken aufrufen müssen
  2. YOUR_ICON_NAME mit Symbolname

für Symbole besuchen Sie bitte diese Website http://ionicframework.com/docs/v2/ionicons/

0
SABDAR SHAIK