[IONIC] – Pinterest Layout

[IONIC] – Pinterest Layout

Olá galera, tudo bem com vocês?

Hoje vou mostrar como fazer uma Grid com imagens e textos no estilo Pinterest.

A partir deste tutorial, você pode criar nas suas aplicações e adequar de acordo com a necessidade de cada uma, deixando muito mais dinâmico e interessante para o usuário.

Vamos lá?!

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. Criar os títulos e imagens do Layout

Após a criação do projeto, vamos alterar o arquivo src/pages/home/home.ts: 

De forma muito simples, criamos um array com 2 propriedades em cada objeto (nome e imagem).

 

3. Criando o estilo Pinterest no Layout

Agora que temos os dados no array, vamos iterar e bucar as informações do mesmo.
Após isso, percorrendo cada objeto do array, vamos mostrar a imagem e o título.

Então, vamos alterar o arquivo src/pages/home/home.html: 

4. Estilizando para deixar igual ao Pinterest

Repare que no arquivo src/pages/home/home.html,  nós criamos 2 divs e definimos class para poder estilizar nossa aplicação.

Então vamos alterar o arquivo src/pages/home/home.scss e deixar no estilo Pinterest:

Na div de class .pins, definimos o column-count: 2, pois neste exemplo deixamos 2 colunas.

Na div de class .pin, fizemos apenas ajustes com padding, margin e display para alinhamentos e margens.

Na div de class .titulo, apenas definimos centralização do texto e uma cor vermelha.

OBS: Nesse arquivo, você poderá alterar e implementar várias propriedades de css, de acordo com a necessidade da sua aplicação. Veja mais

5. Executando o projeto

Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:

ou

ou

e deveremos ter algo semelhante à isso:

Espero que possam utilizar daqui pra frente nos projetos de vocês essa dica bem legal.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Previous Curso grátis - Dominando Linq e Lambda Expressions com C#
Next Balta.io - BlackWeek 2017

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 8 – Adicionando tela de aguarde!

Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde

Mobile 4 Comments

[IONIC] – Animações com Lottie Files (ng-lottie)

Share this on WhatsAppOlá devs, tudo bem por aí?? Bom, a dica de hoje é bem legal e com certeza deixa nossos apps bem mais intuitivos e interessantes, pois iremos utilizar

Mobile 2 Comments

Atualizado – Curso grátis de Ionic 3 – Novos cupons!

Share this on WhatsAppFala galera, ontem liberei alguns cupons para realizar meu curso de Ionic gratuitamente, mas muita gente ficou de fora! Muita gente entrou em contato querendo um cupom,

2 Comments

Leave a Reply