Ionic 2/3/4: Wie Taste in der Kopfzeile auf die rechte Seite des

Kopfes ausrichten Wie kann ich mit der rechten Seite auszurichten, wird der Button auf der linken Seite des Kopfes ohne Symbol zur zeigt. HierIonic 2/3/4: Wie Taste in der Kopfzeile auf die rechte Seite des

ist, was ich tue:

<ion-toolbar> 
<ion-title>TODO APP</ion-title> 
<button class = "button button-icon"> 
    <i class="icon ion-compose"></i> 
</button> 
</ion-toolbar>

Quelle

2016-03-15 blackHawk

Hallo ! Vergessen Sie nicht, Ihr Problem als gelöst zu markieren, indem Sie die Antwort auswählen, die für Sie am nützlichsten ist. Es wird anderen Leuten helfen ;-) –

Sie können Taste auf der rechten Seite in der Kopfzeile hinzufügen, in 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>

Sie Ihre CSS-Klasse benutzerdefinierte Symbol ist wie diese

hinzufügen

css

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

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

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

html

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

Quelle

2016-03-15 08:35:33 Ved

wenn da Icon von komponieren sein sollte, dann? – blackHawk

Sie können Ihren Klassennamen hinzufügen, wenn das Symbol für die Zusammenstellung verfügbar ist. – Ved

Ich habe gerade aus der Dokumentation gelesen, dass: Um ein Symbol zu verwenden, fügen Sie einfach die CSS-Klasse des Symbols zu Ihrem Element, wie das zu tun, wo ist die CSS-Klasse des Symbols – blackHawk

-3

<ion-view title="home" align-title="center">  
    <ion-nav-buttons side="right">   
     <button ng-click="search()" class="button button-icon icon ion-android-search"></button> 
    </ion-nav-buttons>  
    <ion-content has-bouncing="0px"> 
    </ion-content> 
</ion-view>

das sollte für Sie arbeiten ......

Quelle

2016-03-15 08:46:12 nitin

Ist es nicht ionische ** 1 ** Code? –

ja das ist ionisch 1 code – nitin

-2

Zunächst einmal von Ihrer Syntax ist ein bisschen falsch für ionische 2. Sie können einfach Inline-CSS-Eigenschaft verwenden, um die Schaltfläche auf die rechte Seite zu verschieben.

<ion-toolbar> 
<ion-title> 
    TODO APP 
<button style="float: right;"> 
    <ion-icon name="home"></ion-icon> 
</button> 
</ion-title> 

</ion-toolbar>

Getestet habe ich es auf meinem System

Sie :-)

nachgeführt auch einfache CSS-Eigenschaften wie margin/padding/float ausrichten Taste oder andere Komponenten verwenden können.

Hoffe es funktioniert auch für Sie.

Quelle

2016-05-12 17:07:43

Ionic2 bevorzugt Flex, also denke nicht, mit Floats ist weise – AFD

Ionic 2/Ionic 3 hat etwas für, dass am folgenden Code anschauen:

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

Der Vorteil des Problems auf diese Weise zu lösen ist, dass Ihr navbar automatisch die android/ios/windows Richtlinien respektieren . Auf diese Weise 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

Quelle

2016-08-09 18:57:39

Die Ion-Buttons-Tag mit Ende-Attribut ist genau das, was ich brauchte, danke! –

Gern geschehen, Alter! Hoffe, ich werde dir eines Tages mehr helfen können haha ;-) –

Was ist, wenn ich nur einen Knopf auf der linken Seite habe, und ich brauche den Titel in der Mitte des Ionen-Headers zu haben, nicht das Zentrum von Ionen- Titel (genau zentriert) –

Ich löste mein Problem dabei:

ion-buttons { 
    order: 10 
}

Versuchen Zugabe zu Ihrem Stylesheet

Hinweis: habe ich dies in ionic2.

Quelle

2016-10-07 07:45:31

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

YOUR_FUNCTION_CALL mit der Funktion rufen Sie anrufen müssen, wenn
YOUR_ICON_NAME mit Symbolnamen klicken

für Symbole finden Sie auf dieser Website http://ionicframework.com/docs/v2/ionicons/

Quelle

2017-01-22 06:07:44

Ionic 2/3/4: Wie Taste in der Kopfzeile auf die rechte Seite des

Antwort

Verwandte Themen