[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
Xamarin Forms – Data Binding entre controles
Share this on WhatsAppAprenda fazer Data Binding entre seus componentes de sua View no Xamarin Forms Fala galera, beleza? Como alguns de vocês já sabem, depois de passar um tempo
Criando uma Splash Screen animada no Ionic 2/3 com HTML e CSS3
Share this on WhatsAppSalve Coders do amor, kkk, brincadeiras a parte sabemos o quanto um App grande pode acabar com a experiência em termos de performance e download nas stores
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,
0 Comments
No Comments Yet!
You can be first to comment this post!