[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 10 posts

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

You might also like

Mobile 1Comments

Criando Componente Accordion List com Ionic 3

Share this on WhatsAppOlá Galera.. tudo tranquilo? Sou novo por aqui e hoje vou trazer uma dica para deixar sua aplicação mobile um pouco mais intuitiva para o usuário, criando

Conheça a classe Lazy do C# e ganhe mais performance e memória

Share this on WhatsAppComo utilizar a classe Lazy no C# Quem nunca teve problemas com performance em seu código que atire a primeira pedra! Resolvi escrever esse post com o

Mobile 4 Comments

Qual o melhor aplicativo híbrido ou nativo?

Share this on WhatsAppApps híbridos X nativo Pessoal, venho tentar resolver neste post uma dúvida muito comum para quem quer se aventurar na área de desenvolvimento mobile. Muitas pessoas se

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply