tête et fond ioniques

En-tête

L'en-tête est un composant fixé en haut de l'écran, qui peut inclure des titres et des boutons de fonction gauche et droit.

ionic propose de nombreux styles de couleurs par défaut. Vous pouvez appeler différents noms de styles et bien sûr, vous pouvez en personnaliser un.

barre lumineuse

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

bar-positive

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

bar-calme

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

bar-équilibré

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

bar-énergisé

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

bar-affirmatif

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

Sub Header (sous-titre)

Sub Header est également fixé en haut, il se trouve juste en dessous de l'en-tête. Même si l'en-tête n'est pas écrit, le style du sous-en-tête sera à un en-tête du haut. Le style de couleur est le même que celui de l'en-tête.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Pied de page (en bas)

Le pied de page se trouve en bas de l'écran et peut contenir plusieurs types de contenu.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Le pied de page est le même que l'en-tête ci-dessus, sauf que le nom du style bar-header est remplacé par bar-footer.

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

De plus, s'il n'y a pas de titre en bas, mais que vous avez besoin d'un bouton à droite, vous devez ajouter pull-right au bouton de droite tels que :

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>