[IONIC 3] – Criando Transparent Header

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

Previous [IONIC 3] - Criando elegante Slide-Show
Next [IONIC 3] - Selecionar items com ion-Slide e ion-Chip

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

Curso básico sobre XAML para iniciantes

Share this on WhatsAppCurso básico sobre XAML Uma das grandes dificuldades para quem esta iniciando o processo de desenvolvimento de aplicações universais para Windows e Windows Phone, é a manipulação

Mobile 0 Comments

Curso Ionic em português – Aula 4 – Importando projeto do Ionic Creator

Share this on WhatsAppImportando dados do Ionic Creator Pessoal, continuando com nossa série de vídeo aulas, hoje trago pra vocês dicas de como importar o projeto criado no Ionic Creator

Mobile 0 Comments

Ionic 5 é Lançado!

Share this on WhatsAppFala pessoal, sei que ando sumido, mas pretendo nos próximos dias reativar meu blog.Hoje veio aqui trazer uma grande novidade, nosso famoso Ionic 5 foi lançado agora,

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply