[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

Grátis – Crie Apps com Ionic 3 e WebApi em Asp.Net Core usando DDD

Share this on WhatsAppFala galera, beleza? Bom espero que sim! Conforme prometido, venho anunciar o meu novo curso onde ensino criar um aplicativo em Ionic 3 e no BackEnd criamos

Sem categoria 0 Comments

Live 03 – Como GERAR PDF em IONIC 5

Share this on WhatsAppFala Dev!Estarei realizando uma live no dia 30/04 as 21:10h onde ensinarei Como GERAR PDF em IONIC 5.Ha ideia dessa live surgiu a partir das dúvidas de

Mobile 4 Comments

Curso completo de Xamarim Forms em português

Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply