UI com Ionic Components: layout mobile com ion-header, ion-content e ion-footer

Hierarquia básica de tela no Ionic

No Ionic, a estrutura mais comum de uma tela segue uma hierarquia simples: uma área superior para navegação e ações (ion-header), uma área central rolável para o conteúdo (ion-content) e, quando necessário, uma área inferior fixa (ion-footer). Essa separação garante comportamento mobile consistente: barra superior sempre visível, conteúdo com rolagem independente e rodapé fixo sem “brigar” com a rolagem.

<ion-header>...</ion-header>
<ion-content>...</ion-content>
<ion-footer>...</ion-footer>

Use essa hierarquia dentro do template da página. Evite colocar conteúdo “principal” dentro do ion-header ou ion-footer; eles são para navegação, títulos e ações rápidas.

ion-header + ion-toolbar: títulos e ações

O ion-header normalmente contém um ion-toolbar, que organiza título e botões. A toolbar já aplica padrões de altura, alinhamento e espaçamento adequados para mobile.

Estrutura recomendada

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>

    <ion-title>Detalhes</ion-title>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="create-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

• ion-title centraliza e adapta o título conforme a plataforma.
• ion-buttons com slot="start" e slot="end" posiciona ações à esquerda/direita.
• ion-back-button segue o padrão de navegação (quando aplicável) e evita você ter que desenhar o botão manualmente.

Toolbar com busca (padrão comum)

Quando você precisa de um campo de busca, é comum usar uma segunda toolbar dentro do header. Isso mantém a busca fixa e o conteúdo rolando abaixo.

<ion-header>
  <ion-toolbar>
    <ion-title>Produtos</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="options-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar>
    <ion-searchbar placeholder="Buscar"></ion-searchbar>
  </ion-toolbar>
</ion-header>

ion-content: área rolável e espaçamento

ion-content é a área principal e rolável. Ele cuida de detalhes importantes: rolagem suave, comportamento com teclado, safe areas e integração com componentes como listas e cards.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Padding e densidade visual

Em telas mobile, densidade visual é o equilíbrio entre “caber bastante informação” e “manter legibilidade e toque confortável”. No Ionic, você controla isso principalmente com espaçamentos e tamanhos de componentes.

• Use class="ion-padding" para dar respiro ao conteúdo em telas de formulário, detalhes e dashboards.
• Evite padding em telas de lista cheia (ex.: ion-list), onde o padrão é ocupar a largura toda.
• Prefira separar blocos com ion-item-divider, ion-card ou margens utilitárias (ion-margin, ion-margin-top etc.).

<ion-content class="ion-padding">
  <h3>Resumo</h3>
  <p>Conteúdo com espaçamento confortável para leitura.</p>

  <ion-card>
    <ion-card-header>
      <ion-card-title>Saldo</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      R$ 1.250,00
    </ion-card-content>
  </ion-card>
</ion-content>

Conteúdo longo e rolagem

Coloque tudo que deve rolar dentro do ion-content. Se você colocar um bloco grande no ion-footer, por exemplo, ele ficará fixo e pode “espremer” a área rolável.

Quando você precisa de uma ação fixa (ex.: botão “Salvar”), use o footer; quando precisa de conteúdo que cresce, use o content.

ion-footer: ações fixas e barras inferiores

ion-footer é ideal para ações persistentes: botões principais, totais de carrinho, controles de reprodução, etc. O padrão é usar ion-toolbar dentro dele para manter consistência visual.

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button color="primary">Salvar</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Footer com botão em largura total

Um padrão muito usado é o botão principal ocupar toda a largura, com padding adequado para toque.

<ion-footer>
  <ion-toolbar>
    <ion-button expand="block" color="primary" class="ion-margin">
      Finalizar
    </ion-button>
  </ion-toolbar>
</ion-footer>

• expand="block" faz o botão ocupar a largura disponível.
• class="ion-margin" evita que o botão encoste nas bordas, melhorando a ergonomia.

Passo a passo: montando uma tela completa (header + content + footer)

Objetivo: criar uma tela de “Detalhe do Pedido” com título, ações, conteúdo rolável e botão fixo no rodapé.

1) Crie o header com título e ações

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/pedidos"></ion-back-button>
    </ion-buttons>

    <ion-title>Pedido #1024</ion-title>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="share-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

2) Adicione o conteúdo rolável com espaçamento

<ion-content class="ion-padding">
  <ion-card>
    <ion-card-header>
      <ion-card-title>Status</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Em separação
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-list-header>
      <ion-label>Itens</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>
        <h3>Camiseta</h3>
        <p>Tamanho M</p>
      </ion-label>
      <ion-note slot="end">R$ 59,90</ion-note>
    </ion-item>

    <ion-item>
      <ion-label>
        <h3>Calça</h3>
        <p>Tamanho 42</p>
      </ion-label>
      <ion-note slot="end">R$ 129,90</ion-note>
    </ion-item>
  </ion-list>

  <ion-card>
    <ion-card-header>
      <ion-card-title>Entrega</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Rua Exemplo, 123 - Centro
    </ion-card-content>
  </ion-card>
</ion-content>

Note que ion-list geralmente fica melhor sem padding lateral extra. Se você perceber “duplo espaçamento” (card com padding + list com padding), experimente remover o ion-padding e aplicar margens apenas onde necessário, ou separar a lista em uma área sem padding.

3) Inclua um footer com ação principal fixa

<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row class="ion-align-items-center">
        <ion-col size="6">
          <ion-text><strong>Total:</strong> R$ 189,80</ion-text>
        </ion-col>
        <ion-col size="6" class="ion-text-right">
          <ion-button color="primary">Pagar</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

Aqui o ion-grid ajuda a alinhar “Total” à esquerda e o botão à direita, mantendo um layout estável em diferentes larguras.

Composição de layout com ion-grid: colunas, alinhamento e responsividade

ion-grid implementa um sistema de linhas e colunas (12 colunas) para organizar conteúdo. É útil para dashboards, formulários em duas colunas (em tablets) e áreas com múltiplos blocos.

Grid básico

<ion-grid>
  <ion-row>
    <ion-col size="6">Esquerda</ion-col>
    <ion-col size="6">Direita</ion-col>
  </ion-row>
</ion-grid>

Alinhamento vertical e horizontal

Use classes utilitárias para alinhar itens sem precisar criar CSS do zero.

• ion-align-items-center: centraliza verticalmente os itens na linha.
• ion-justify-content-between: distribui espaço entre colunas (quando aplicável).
• ion-text-right / ion-text-center: alinhamento de texto.

<ion-grid>
  <ion-row class="ion-align-items-center">
    <ion-col size="8">
      <ion-label>
        <h3>Notificações</h3>
        <p>Receber alertas importantes</p>
      </ion-label>
    </ion-col>
    <ion-col size="4" class="ion-text-right">
      <ion-toggle></ion-toggle>
    </ion-col>
  </ion-row>
</ion-grid>

Grid responsivo (ex.: cards em 1 coluna no celular e 2 no tablet)

Você pode variar o tamanho das colunas por breakpoint. Um padrão simples: no celular, cada card ocupa 12; em telas maiores, 6.

<ion-grid>
  <ion-row>
    <ion-col size="12" size-md="6">
      <ion-card>
        <ion-card-header>
          <ion-card-title>Vendas</ion-card-title>
        </ion-card-header>
        <ion-card-content>R$ 8.420</ion-card-content>
      </ion-card>
    </ion-col>

    <ion-col size="12" size-md="6">
      <ion-card>
        <ion-card-header>
          <ion-card-title>Pedidos</ion-card-title>
        </ion-card-header>
        <ion-card-content>132</ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Padrões de UI mobile: boas práticas rápidas

Erros comuns e como evitar

• Colocar conteúdo rolável fora do ion-content: resulta em rolagem quebrada ou elementos “sumindo” atrás do header/footer. Solução: mova o conteúdo para dentro do ion-content.
• Toolbar com muitas ações: dificulta leitura do título e aumenta erros de toque. Solução: mantenha 1–2 ações e mova o restante para um menu (ex.: botão de opções).
• Padding em excesso: deixa a tela “apertada” e com pouco conteúdo visível. Solução: use padding apenas onde melhora leitura (detalhes, formulários) e evite em listas.
• Footer alto demais: reduz área útil do conteúdo. Solução: mantenha o rodapé compacto (toolbar + ação principal) e evite empilhar muitos elementos fixos.