Como configurar seu cabeçalho

O cabeçalho

O cabeçalho é a barra no topo do seu app. Ele fica visível em todas as telas: mostra a identidade do seu app, dá um título a cada seção, reúne atalhos e ajuda seus usuários a se orientar.

Você configura o cabeçalho no menu "My App".

Na estrutura do seu app, clique em Header.

Altura do cabeçalho

Primeiro, escolha a altura do cabeçalho: Small, Medium ou Large.

Escolha Medium… e o cabeçalho fica mais alto, com o mesmo título ou logotipo.

Escolha Large… e você pode adicionar uma descrição curta. Digite aqui… e clique em OK.

Ela aparece abaixo do seu título, no cabeçalho grande.

Medium e Large valem para as seções da sua navegação principal; as outras páginas sempre usam Small. Este app mantém o Small.

Título ou logo

No bloco Logo, o nome do seu app aparece como texto ou como imagem. Para mudar o texto, digite seu título… e clique em OK.

A pré-visualização se atualiza na hora.

Para mudar a cor, clique nela, digite um código ou escolha uma, e depois clique em Choose.

O título muda de cor.

Escolha uma fonte na lista… e ela aparece na pré-visualização.

Ajuste o tamanho com o controle deslizante.

O título fica maior.

Se preferir exibir seu logotipo, clique em Logo e escolha uma imagem de pelo menos 800 × 200 pixels.

Seu logotipo ocupa o lugar do texto.

Posicione à esquerda ou deixe centralizado.

Aqui, ele vai para a esquerda.

Depois, escolha o que o cabeçalho exibe durante a navegação: sempre seu logotipo, com "Logo only", como nesta página… ou então o nome de cada seção, com "Section title".

Botões de navegação

À esquerda do cabeçalho ficam os botões de navegação: o botão Back, aqui na pré-visualização, e o botão Menu, se a sua navegação tiver um. Aqui você define o ícone e a cor deles.

Por exemplo, uma nova cor para o botão Back… aparece na hora.

Fundo

Para o fundo, escolha uma cor, e também a da borda inferior.

O fundo do cabeçalho muda de cor.

Com o cabeçalho pequeno, você também pode usar uma imagem de fundo de 1242 × 192 pixels.

Agora a imagem preenche o cabeçalho.

Para remover a imagem, clique na lixeira… e confirme.

O cabeçalho volta a exibir sua cor de fundo.

Efeito de rolagem

O efeito de rolagem define o que o cabeçalho faz quando a página rola para baixo: ele fica fixo ou se esconde. Se for médio ou grande, também pode encolher.

Com Hiding, o cabeçalho desaparece conforme a página rola.

Ações no cabeçalho

À direita, ficam as ações: atalhos para as páginas que você escolher. Para adicionar, clique em "Add an action"… e escolha o destino, aqui a seção Search.

O novo atalho aparece no cabeçalho, com um ícone padrão.

Para trocar o ícone, clique nele… pesquise na biblioteca de ícones e escolha a lupa.

Agora o atalho exibe uma lupa. Você também pode definir a cor dele; no tablet e no computador, ele pode exibir um título e, no computador, aparecer como botão.

O cabeçalho exibe dois atalhos; os demais vão para um menu extra.

Um cabeçalho por seção

Cada seção também pode ter seu próprio cabeçalho. Volte para a estrutura… e clique em uma seção.

Abra Header… e escolha "Modify the header of this section".

A configuração é igual à do cabeçalho geral. Aqui, uma cor de fundo diferente… só para esta seção.

Para voltar ao cabeçalho geral, clique na engrenagem… depois em "Go back to default header" e confirme.

A seção volta a usar o cabeçalho geral.

Publicar

Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish.