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

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

You might also like

Mobile 1Comments

Criando Horizontal Scrolling

Share this on WhatsAppFala galera, tranquilo? Vou mostrar aqui mais uma dica para embelezar os projetos e aplicativos de vocês, utilizando um horizontal scrolling. Bora lá? 1. Criar o projeto Ionic Vamos

Mobile 0 Comments

[IONIC] – Custom Loader

Share this on WhatsAppOlá galera, tranquilo? Primeiro, desejo a vocês um grande Ano Novo, muita saúde, sabedoria e sucesso na jornada de todos. Bom, a dica de hoje é bem legal.

Mobile 0 Comments

Curso Ionic em português – Aula 9 – Tratando botão back da tela e do aparelho

Share this on WhatsAppVeja como remover o botão back da tela e tratar o back do hardware Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply