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

Mobile 0 Comments

O que é Npm, Bower, Gulp, Nuget, TypeScript e Sass?

Share this on WhatsAppVeja o que é e para que serve essas novas ferramentas! Venho hoje através deste post esclarecer o que é e para que serve as ferramentas Npm,

Mobile 0 Comments

Curso Ionic em português – Aula 10 – Consumindo serviços externos

Share this on WhatsAppAprenda como consumir serviços externos Pessoal, continuando com nossa série de vídeo aulas, hoje iremos criar um aplicativo dos Correios onde poderemos consultar um determinado CEP e

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply