Ionic - En-tête
le Ionic header barest situé en haut de l'écran. Il peut contenir un titre, des icônes, des boutons ou d'autres éléments par-dessus. Il existe des classes prédéfinies d'en-têtes que vous pouvez utiliser. Vous pouvez tout vérifier dans ce tutoriel.
Ajouter un en-tête
La classe principale de toutes les barres que vous pourriez utiliser dans votre application est bar. Cette classe sera toujours appliquée à toutes les barres de votre application. Toutbar subclasses utilisera le préfixe - bar.
Si vous souhaitez créer un en-tête, vous devez ajouter bar-header après ton principal barclasse. Ouvrez votrewww/index.html fichier et ajoutez la classe d'en-tête dans votre bodymarque. Nous ajoutons un en-tête auindex.html body car nous voulons qu'il soit disponible sur tous les écrans de l'application.
Depuis bar-header la classe a le style par défaut (blanc) appliqué, nous ajouterons le titre par-dessus, afin que vous puissiez le différencier du reste de votre écran.
<div class = "bar bar-header">
<h1 class = "title">Header</h1>
</div>
Le code ci-dessus produira l'écran suivant -

Couleurs d'en-tête
Si vous souhaitez styliser votre en-tête, il vous suffit de lui ajouter la classe de couleur appropriée. Lorsque vous stylisez vos éléments, vous devez ajouter votre classe d'élément principale en tant que préfixe à votre classe de couleurs. Puisque nous stylisons la barre d'en-tête, la classe de préfixe serabar et la classe de couleur que nous voulons utiliser dans cet exemple est positive (bleu).
<div class = "bar bar-header bar-positive">
<h1 class = "title">Header</h1>
</div>
Le code ci-dessus produira l'écran suivant -

Vous pouvez utiliser l'une des neuf classes suivantes pour donner une couleur de votre choix à l'en-tête de votre application -
Classe de couleur | La description | Résultat |
---|---|---|
barre-lumière | À utiliser pour la couleur blanche | |
écurie | À utiliser pour la couleur gris clair | |
barre positive | À utiliser pour la couleur bleue | |
bar-calme | À utiliser pour la couleur bleu clair | |
barre équilibrée | À utiliser pour la couleur verte | |
bar-alimenté | À utiliser pour la couleur jaune | |
bar-assertif | À utiliser pour la couleur rouge | |
bar-royal | À utiliser pour la couleur violette | |
bar-sombre | À utiliser pour la couleur noire |
Éléments d'en-tête
Nous pouvons ajouter d'autres éléments à l'intérieur de l'en-tête. Le code suivant est un exemple pour ajouter unmenu bouton et un homebouton à l'intérieur d'un en-tête. Nous ajouterons également des icônes au-dessus de nos boutons d'en-tête.
<div class = "bar bar-header bar-positive">
<button class = "button icon ion-navicon"></button>
<h1 class = "title">Header Buttons</h1>
<button class = "button icon ion-home"></button>
</div>
Le code ci-dessus produira l'écran suivant -

Sous-en-tête
Vous pouvez créer un sous-en-tête qui sera situé juste en dessous de la barre d'en-tête. L'exemple suivant montre comment ajouter un en-tête et un sous-en-tête à votre application. Ici, nous avons stylisé le sous-en-tête avec une classe de couleur «assertive» (rouge).
<div class = "bar bar-header bar-positive">
<button class = "button icon ion-navicon"></button>
<h1 class = "title">Header Buttons</h1>
<button class = "button icon ion-home"></button>
</div>
<div class = "bar bar-subheader bar-assertive">
<h2 class = "title">Sub Header</h2>
</div>
Le code ci-dessus produira l'écran suivant -

Lorsque votre itinéraire est modifié pour l'un des écrans de l'application, vous remarquerez que l'en-tête et le sous-en-tête couvrent une partie du contenu, comme indiqué dans la capture d'écran ci-dessous.

Pour résoudre ce problème, vous devez ajouter un ‘has-header’ ou un ‘has-subheader’ classe à la ion-contentbalises de vos écrans. Ouvrez l'un de vos fichiers HTML depuiswww/templates et ajoutez le has-subheader classe à la ion-content. Si vous n'utilisez que l'en-tête dans votre application, vous devrez ajouter lehas-header classe à la place.
<ion-content class = "padding has-subheader">
Le code ci-dessus produira l'écran suivant -
