Ionic - Cabeçalho Javascript

Esta é a diretiva Ionic, que adicionará a barra de cabeçalho.

Usando JavaScript Header

Para criar uma barra de cabeçalho JavaScript, precisamos aplicar o ion-header-bardiretiva no arquivo HTML. Como o cabeçalho padrão é branco, adicionaremostitle, por isso será mostrado em fundo branco. Vamos adicioná-lo ao nossoindex.html Arquivo.

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

O código acima irá produzir a seguinte tela -

Cabeçalho de Estilo

Assim como a barra de cabeçalho CSS, a contraparte JavaScript pode ser estilizada de maneira semelhante. Para aplicar a cor, precisamos adicionar uma classe de cor com umbarprefixo. Portanto, se quisermos usar um cabeçalho azul, adicionaremos umbar-positiveclasse. Também podemos mover o título para um lado da tela adicionando oalign-titleatributo. Os valores para este atributo podem sercenter, left ou right.

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

O código acima irá produzir a seguinte tela -

Adicionando Elementos

Normalmente você desejará adicionar alguns elementos ao seu cabeçalho. O exemplo a seguir mostra como colocar umbutton no lado esquerdo e um iconpara o lado direito da barra de cabeçalho de íons. Você também pode adicionar outros elementos ao seu cabeçalho.

<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>

O código acima irá produzir a seguinte tela -

Adicionando Subcabeçalho

Um cabeçalho Sub é criado quando um bar-subheader classe é adicionada ao ion-header-bar. Vamos adicionar umbar-assertive classe para aplicar a cor vermelha ao nosso subcabeçalho.

<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>

O código acima irá produzir a seguinte tela -