Come posso allineare con il lato destro, il pulsante viene visualizzato a sinistra dell'intestazione senza icona di composizione.Ionico 2/3/4: Come allineare il pulsante nell'intestazione sul lato destro dell'intestazione
Ecco quello che sto facendo:
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
pulsante è possibile aggiungere a destra nell'intestazione 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>
È possibile aggiungere classe CSS del vostro icona personalizzata come questo
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
O
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
O
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
<ion-icon name="custom"></ion-icon>
se ci dovrebbe essere l'icona di comporre, allora? – blackHawk
è possibile aggiungere il nome della classe se l'icona di composizione è disponibile lì. – Ved
Ho appena letto dalla documentazione che: Per usare un'icona, basta aggiungere la classe CSS Icon al tuo elemento, come fare dove è la classe css dell'icona – blackHawk
<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>
questo dovrebbe funzionare per voi ......
Non è ionico ** 1 ** codice? –
sì questo è ionico 1 codice – nitin
Prima di tutto la sintassi è un po 'errata per ionico 2. È sufficiente utilizzare la proprietà CSS in linea per spostare il pulsante sul lato destro.
<ion-toolbar>
<ion-title>
TODO APP
<button style="float: right;">
<ion-icon name="home"></ion-icon>
</button>
</ion-title>
</ion-toolbar>
ho justed testato sul mio sistema :-)
È inoltre possibile utilizzare semplici proprietà CSS come margin/padding/float pulsante o di altri componenti per allineare.
Spero che funzioni anche per te.
Ionic2 preferisce Flex, quindi non pensare che usare i float sia saggio – AFD
ionico 2/ionica 3 ha qualcosa per questo, basta guardare il seguente codice:
<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>
Il vantaggio di risolvere il tuo problema in questo modo è che la vostra barra di navigazione rispetterà automaticamente le linee guida/ios/Android Windows . In questo modo puoi migliorare la qualità della tua app.
Maggiori informazioni sulle linee guida:
Android: https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS: https://developer.apple.com/ios/human-interface-guidelines/
di Windows: https://developer.microsoft.com/en-us/windows/design
Il tag ion-buttons con l'attributo end è esattamente quello di cui avevo bisogno, grazie! –
Sei il benvenuto amico! Spero di poterti aiutare un giorno più o meno ;-) –
e se avessi un solo pulsante a sinistra, e ho bisogno che il titolo sia al centro dell'intestazione dello ione, non al centro dello ione- titolo (essere esattamente al centro) –
ho risolto il mio problema con questo:
ion-buttons {
order: 10
}
Prova ad aggiungere al vostro foglio di stile
Nota: Ho usato questo in 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>
Sostituire:
per le icone si prega di visitare questo sito http://ionicframework.com/docs/v2/ionicons/
Hi ! Non dimenticare di contrassegnare il problema come risolto selezionando la risposta che è stata più utile per te. Aiuterà altre persone ;-) –