[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:
1 |
ionic start transparentHeader blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd transparentHeader |
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:
1 2 3 4 5 6 7 |
page-home { ion-content { background-image: url('https://i.pinimg.com/736x/b7/de/aa/b7deaa019a28268ae9de6df4aefce398--night-photography-galaxy-photography.jpg'); background-size: cover; background-position-x: 50%; } } |
3. Executando o projeto para acompanhar
Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:
1 |
ionic serve -l |
ou
1 |
ionic cordova run android |
ou
1 |
ionic cordova run ios |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ion-header> <ion-navbar> <ion-title>Meu App</ion-title> </ion-navbar> </ion-header> <ion-content fullscreen> <ion-card> <img src="https://images.pexels.com/photos/2156/sky-earth-space-working.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /> </ion-card> <ion-card> <img src="https://images.pexels.com/photos/24895/pexels-photo-24895.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /> </ion-card> <ion-card> <img src="https://images.pexels.com/photos/87651/earth-blue-planet-globe-planet-87651.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /> </ion-card> <ion-card> <img src="https://images.pexels.com/photos/23789/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /> </ion-card> <ion-card> <img src="https://images.pexels.com/photos/2159/flight-sky-earth-space.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /> </ion-card> </ion-content> |
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:
1 2 3 4 5 |
<ion-header no-border> <ion-navbar transparent> <ion-title>Meu App</ion-title> </ion-navbar> </ion-header> |
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!
About author
You might also like
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
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
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!