Ionico - Intestazione
Il Ionic header barsi trova nella parte superiore dello schermo. Può contenere titoli, icone, pulsanti o altri elementi sopra di esso. Ci sono classi predefinite di intestazioni che puoi usare. Puoi controllare tutto in questo tutorial.
Aggiunta di intestazione
La classe principale per tutte le barre che potresti usare nella tua app è bar. Questa classe verrà sempre applicata a tutte le barre della tua app. Tuttibar subclasses userà il prefisso - bar.
Se vuoi creare un'intestazione, devi aggiungere bar-header dopo il tuo main barclasse. Apri i tuoiwww/index.html file e aggiungi la classe di intestazione all'interno del tuo bodyetichetta. Stiamo aggiungendo un'intestazione al fileindex.html body perché vogliamo che sia disponibile su ogni schermata dell'app.
Da bar-header class ha uno stile predefinito (bianco) applicato, aggiungeremo il titolo sopra, in modo da poterlo differenziare dal resto dello schermo.
<div class = "bar bar-header">
<h1 class = "title">Header</h1>
</div>
Il codice precedente produrrà la seguente schermata:
Colori intestazione
Se vuoi modellare la tua intestazione, devi solo aggiungere la classe di colore appropriata ad essa. Quando modifichi i tuoi elementi, devi aggiungere la tua classe di elementi principale come prefisso alla tua classe di colori. Dato che stiamo modellando la barra dell'intestazione, la classe del prefisso saràbar e la classe di colore che vogliamo usare in questo esempio è positive (blu).
<div class = "bar bar-header bar-positive">
<h1 class = "title">Header</h1>
</div>
Il codice precedente produrrà la seguente schermata:
Puoi utilizzare una delle seguenti nove classi per dare un colore a tua scelta all'intestazione della tua app:
Classe di colore | Descrizione | Risultato |
---|---|---|
luce bar | Da utilizzare per il colore bianco | |
bar stabile | Da utilizzare per il colore grigio chiaro | |
bar-positivo | Da utilizzare per il colore blu | |
bar-calma | Da utilizzare per il colore azzurro | |
equilibrato | Da utilizzare per il colore verde | |
energizzato al bar | Da utilizzare per il colore giallo | |
bar assertivo | Da utilizzare per il colore rosso | |
bar-royal | Da utilizzare per il colore viola | |
bar-buio | Da utilizzare per il colore nero |
Elementi di intestazione
Possiamo aggiungere altri elementi all'interno dell'intestazione. Il codice seguente è un esempio per aggiungere un filemenu pulsante e a homepulsante all'interno di un'intestazione. Aggiungeremo anche icone sopra i nostri pulsanti di intestazione.
<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>
Il codice precedente produrrà la seguente schermata:
Sottotitolo
Puoi creare un'intestazione secondaria che si troverà appena sotto la barra dell'intestazione. Il seguente esempio mostrerà come aggiungere un'intestazione e un'intestazione secondaria alla tua app. Qui, abbiamo designato il sottotitolo con una classe di colore "assertivo" (rosso).
<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>
Il codice precedente produrrà la seguente schermata:
Quando il tuo percorso viene modificato in una delle schermate dell'app, noterai che l'intestazione e la sotto-intestazione coprono alcuni contenuti, come mostrato nello screenshot qui sotto.
Per risolvere questo problema è necessario aggiungere un file ‘has-header’ o a ‘has-subheader’ classe al ion-contenttag dei tuoi schermi. Apri uno dei tuoi file HTML dawww/templates e aggiungi il file has-subheader classe al ion-content. Se utilizzi solo l'intestazione nella tua app, dovrai aggiungere il filehas-header classe invece.
<ion-content class = "padding has-subheader">
Il codice precedente produrrà la seguente schermata: