Criando um background com slides em aplicações mobile com Ionic
Olá Galera.. como estão?
Hoje vamos construir um belo background com slides para ser usado tanto em aplicações mobile com Ionic. O conceito servirá também para outras linguagens que utilizam web e mobile que utilizam HTML e CSS.
Veja abaixo o que iremos fazer:
Bora lá?
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 background-slides blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
|
1 |
cd background-slides |
2. Inserindo as imagens para o background
Aqui estão as imagens utilizadas para esse exemplo.
Iremos colocar as imagens no caminho src/assets/img/background
3. Utilizar as imagens na aplicação
Bom, depois de definido as imagens do background slide, vamos utilizá-los na aplicação.
Modificaremos o arquivo src/pages/home/home.ts
|
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 26 27 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { backgrounds = [ 'assets/img/background/background-1.jpg', 'assets/img/background/background-2.jpg', 'assets/img/background/background-3.jpg', 'assets/img/background/background-4.jpg' ]; constructor(public navCtrl: NavController) {} login() {} facebookLogin() {} goToHome() {} goToSignup() {} } |
Dessa maneira, nós criamos um array (backgrounds) com 4 imagens para o nosso background.
Agora vamos utilizá-lo em nossa view e fazer a mágica acontecer, utilizando ion-slides.
Vamos 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 26 27 28 29 30 31 32 33 34 35 36 |
<ion-header no-border> <ion-navbar transparent> </ion-navbar> </ion-header> <ion-content class="primary-font"> <ion-slides pager="false" autoplay="2000" loop="true" speed="1500" effect="fade"> <ion-slide class="slide-background swiper-no-swiping" *ngFor="let background of backgrounds" [ngStyle]="{'background-image': 'url(' + background +')'}"> </ion-slide> </ion-slides> <div class="login-container"> <ion-item> <ion-input [(ngModel)]="email" type="text" placeholder="Email" clearInput clearOnEdit="false"> </ion-input> </ion-item> <ion-item> <ion-input [(ngModel)]="password" type="password" placeholder="Senha" clearInput clearOnEdit="false"> </ion-input> </ion-item> <button ion-button block outline color="light" class="login-button" (click)="login()">Login</button> <div class="strike"> <span>OU</span> </div> <button ion-button icon-left block outline color="light" class="login-button" (click)="facebookLogin()"><ion-icon name="logo-facebook"></ion-icon>Login com Facebook</button> <br><br><br><br> <div (click)="goToSignup()"> <span>Ainda não possui conta? <button ion-button block outline color="light" class="login-button">Cadastre-se</button></span> </div> </div> </ion-content> |
Veja que utilizamos as propriedades pager=false (para não mostrar os pagers do slide), autoplay=”2000″ (definindo um atraso entre as transições (em milissegundos)), loop=”true” (para que quando chegar no último slide, este volte para o primeiro), speed=”1500″ (definindo a duração da transição dos slides (em milissegundos)) e effect=”fade”.
Para deixar mais elegante nosso background, simulamos uma tela de login, e todo o código está entre:
|
1 2 3 |
<div class="login-container"> //código para simular tela de login </div> |
4. Estilizando a aplicação
Vamos deixar um pouco mais bonita e atraente a aplicação, ok?
Para isso, devemos alterar o arquivo src/pages/home/home.scss
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
page-home { .scroll-content { margin-top: 0 !important; display: flex; flex-direction: column; overflow: hidden; } ion-item { border-radius: 3px !important; padding-left: 10px !important; margin-bottom: 15px !important; margin-bottom: 10px; color: #fff !important; background-color: rgba(255, 255, 255, .2) !important; font-size: 0.9em; } .logo { width: 70%; height: auto; margin-bottom: 15vh; padding-top: 9vh; } .slide-background { border-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; } ::-webkit-input-placeholder { color: white !important; } .login-container { position: absolute; z-index: 2; top: 0; width: 100%; margin: 0 auto; padding: 10vw; text-align: center; color: white; } } |
Para executar no navegador, executamos o comando:
|
1 |
ionic serve -l |
Se você carregar o aplicativo no seu navegador, você deve ter algo que se parece com isto:
Bom, é isso.
Espero que tenham gostado e que possa ser útil nos projetos de vocês.
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu pessoal, até mais!!
About author
You might also like
Criando estiloso SearchBar com ViewChild
Share this on WhatsAppOlá pessoal, tudo tranquilo? Bom, hoje mostrarei como adicionar um Search Bar em sua aplicação, mas não é qualquer Search Bar, vamos fazer ela aparecer e desaparecer ao
Grátis – Crie Apps com Ionic 3 e WebApi em Asp.Net Core usando DDD
Share this on WhatsAppFala galera, beleza? Bom espero que sim! Conforme prometido, venho anunciar o meu novo curso onde ensino criar um aplicativo em Ionic 3 e no BackEnd criamos
Como rodar aplicativo android no celular e debugar pelo browser do PC
Share this on WhatsAppUma dúvida muito comum dos desenvolvedores Ionic é a depuração remota de dispositivos Android.Neste artigo eu irei lhe ensinar como rodar seu aplicativo Ionic no celular e
3 Comments
Valder Nascimento
setembro 24, 22:12Paulo Rogério
setembro 27, 21:19wdson
julho 26, 22:35