En-tête et pied de page Ionic
ion-header-bar
Il s'agit d'une barre de titre d'en-tête fixée en haut de l'écran. Si vous lui ajoutez la classe 'bar-subheader', elle devient un sous-en-tête.
Utilisation
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
API
| Attributes | Type | Description |
|---|---|---|
|
align-title
(facultatif)
|
string
|
Cela aligne le titre. Si ce n'est pas défini, il suit la mise en page par défaut de l'appareil mobile (par défaut sur iOS : center ; par défaut sur Android : left). Sa valeur peut être 'left', 'center', 'right'. |
|
no-tap-scroll
(facultatif)
|
boolean
|
Par défaut, dans la barre de titre d'en-tête, lorsque l'écran est touché, le contenu défile jusqu'à l'en-tête. Vous pouvez définir no-tap-scroll sur true pour désactiver ce comportement. Sa valeur est un booléen (true/false). |
ion-footer-bar
Une fois que vous connaissez ion-header-bar, comprendre ion-footer-bar devient beaucoup plus facile ! La seule différence est que ion-footer-bar se trouve en bas de l'écran.
Utilisation
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
Contrairement à ion-header-bar, ion-footer-bar ne dispose que de l'API align-title.| Attributes | Type | Description |
|---|---|---|
|
align-title
(facultatif)
|
string
|
Cela aligne le titre. Si ce n'est pas défini, il suit la mise en page par défaut de l'appareil mobile (par défaut sur iOS : center ; par défaut sur Android : left). Sa valeur peut être 'left', 'center', 'right'. |