[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 18 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

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

Mobile 0 Comments

Curso Grátis – Iniciando com Ionic

Share this on WhatsAppFala galera, tudo bem por aí? Temos uma boa novidade.. Agora, além de artigos e tutoriais publicados por aqui, criei um canal no Youtube sobre o desenvolvimento

Mobile 0 Comments

Curso Ionic em português – Aula 7 – Gerando nosso APK

Share this on WhatsAppVeja como geramos nosso apk para por o app no celular Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos realizar a

2 Comments

Leave a Reply