[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 16 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 3 Comments

Curso gratuito de Android em português

Share this on WhatsAppeXcript disponibiliza curso gratuito de Android em português Hoje temos uma ótima notícia para vocês, através de uma grande parceria com eXcript, iremos poder disponibilizar vídeo aulas

Mobile 1Comments

Universal Apps – Compartilhando código entre o Windows e Windows Phone

Share this on WhatsAppAprenda compartilhar o código de sua aplicação na Universal Apps Ao iniciarmos o desenvolvimento de um novo aplicativo usando a estrutura do Universal Apps, percebemos que em

3 Comments

Leave a Reply