[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 gratuito de Ionic 1 em português

Share this on WhatsAppComo aprender Ionic 1 Sabemos que o desenvolvimento para dispositivos móveis está em alta e podemos ganhar um bom dinheiro trabalhando de casa. Existem diversas formas de

Mobile 2 Comments

Curso Ionic 5 é lançado, garanta cupons grátis!

Share this on WhatsAppFala Dev! Passando aqui rapidinho para informar que o curso de Ionic 5 do Zero até Publicação acaba de ser lançado! Este curso é para pessoas iniciantes

Mobile 0 Comments

Veja como criar aplicação web, desktop e mobile com um único código

Share this on WhatsAppAndré Baltieri disponibiliza curso que leva AngularJS pra todo lado Esta semana nosso parceiro e amigo André Baltieri disponibilizou um curso muito interessante onde ele irá mostrar

2 Comments

Leave a Reply