[IONIC 3] – Criando Transparent Header

Olá Pessoal, tudo bem com vocês?

A dica de hoje é muito simples e fácil de ser implementado, porém dependendo da situação, seu projeto fica com uma aparência muito bonita.

Vou mostrar como criar um Transparent Header, confira como é simples…

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Definindo o plano de fundo da aplicação

Para visualizar bem o que vamos criar, devemos escolher um plano de fundo (background) para nossa aplicação, para isso, basta alterar o arquivo src/pages/home/home.scss:

3. Executando o projeto para acompanhar

Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:

ou

ou

e deveremos ter algo semelhante à isso:

4. Adicionando conteúdo e efeito de Transparent Header

Agora, vamos simplesmente adicionar um conteúdo em nosso app, apenas demonstrativo, para isso, iremos alterar o arquivo src/pages/home/home.html:

Repare que na tag ion-content, adicionamos a propriedade fullscreen, isso irá fazer com que o conteúdo sobrescreva o nosso header, vejamos mais a frente o resultado.

Bom, agora temos algo semelhante à isso:

Certo, e como fazer o efeito de transparência?

Simples assim, no mesmo arquivo, vamos alterar apenas adicionando a propriedade no-border na tag ion-header e transparent na ion-navbar:

Isso já é o suficiente para deixar nossa aplicação com o efeito de transparência no cabeçalho e com certeza deixa um pouco mais elegante, não é mesmo?

Veja o resultado:

Eai gostaram?

Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!