Ionic - Intestazione Javascript

Questa è la direttiva Ionic, che aggiungerà la barra di intestazione.

Utilizzo dell'intestazione JavaScript

Per creare una barra di intestazione JavaScript, dobbiamo applicare l'estensione ion-header-bardirettiva nel file HTML. Poiché l'intestazione predefinita è bianca, aggiungeremotitle, quindi verrà mostrato su sfondo bianco. Lo aggiungeremo al nostroindex.html file.

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

Il codice precedente produrrà la seguente schermata:

Intestazione di stile

Proprio come la barra di intestazione CSS, la controparte JavaScript può avere uno stile simile. Per applicare il colore, dobbiamo aggiungere una classe di colori con abarprefisso. Pertanto, se vogliamo utilizzare un'intestazione blu, aggiungeremo un filebar-positiveclasse. Possiamo anche spostare il titolo su un lato dello schermo aggiungendo l'estensionealign-titleattributo. I valori per questo attributo possono esserecenter, left o right.

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

Il codice precedente produrrà la seguente schermata:

Aggiunta di elementi

Di solito vorrai aggiungere alcuni elementi alla tua intestazione. Il seguente esempio mostra come posizionare un filebutton sul lato sinistro e un iconsul lato destro della barra di intestazione ionica. Puoi anche aggiungere altri elementi alla tua intestazione.

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

Il codice precedente produrrà la seguente schermata:

Aggiunta di un'intestazione secondaria

Quando un file bar-subheader la classe viene aggiunta al file ion-header-bar. Aggiungeremo un filebar-assertive class per applicare il colore rosso alla nostra intestazione secondaria.

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

Il codice precedente produrrà la seguente schermata: