Jonowy 2/3/4: Jak wyrównać przycisk w nagłówku po prawej stronie nagłówka

Question

Jak wyrównać z prawą stroną, przycisk jest wyświetlany po lewej stronie nagłówka bez ikony tworzenia wiadomości.

Oto co robię:

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

Answer 1

Można dodać przycisk po prawej stronie w nagłówku w 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> 

Możesz dodać klasę css niestandardowego ikona jest tak

css

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

lub

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

lub

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

HTML

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

Answer 2

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

to powinno zadziałać dla ciebie ......

Answer 3

Po pierwsze, cała twoja składnia jest trochę źle dla jonowej 2. Możesz po prostu użyć wbudowanej właściwości CSS, aby przesunąć przycisk na prawą stronę.

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

</ion-toolbar> 

I wyjustowany testowałem to na moim systemie :-)

Można również używać prostych właściwości CSS jak margin/padding/float przycisk lub inne składniki, aby wyrównać.

Mam nadzieję, że to działa również dla Ciebie.

Answer 4

Ionic 2/Ionic 3 ma coś na to, wystarczy spojrzeć na poniższy kod:

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

Zaletą rozwiązania problemu w ten sposób jest to, że navbar automatycznie przestrzegać android wytyczne/iOS/Windows . W ten sposób poprawiasz jakość swojej aplikacji.

Więcej informacje o wytycznych:

Android: https://developer.android.com/guide/practices/ui_guidelines/index.html

iOS: https://developer.apple.com/ios/human-interface-guidelines/

Okna: https://developer.microsoft.com/en-us/windows/design

Answer 5

mi rozwiązać mój problem z tym:

ion-buttons { 
    order: 10 
} 

spróbuj dodać go do swojego arkusza stylów

Uwaga: użyłem tego w ionic2.

Answer 6

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

Wymienić:

1. YOUR_FUNCTION_CALL z funkcją zadzwonić trzeba zadzwonić po kliknięciu
2. YOUR_ICON_NAME z nazwą ikon

ikon można znaleźć na tej stronie http://ionicframework.com/docs/v2/ionicons/