Advertisement
  1. Web Design
  2. Material Design Lite

Aprendendo Material Design Lite: cartões

by
Read Time:5 minsLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Text Fields
Learning Material Design Lite: The Menu

Portuguese (Português) translation by Claudia Conceicao (you can also view the original English article)

Os Cartões estão a tornar-se rapidamente num padrão 'goto' de Interface de Utilizador, particularmente na web móvel. Isto deve-se, em parte, aos websites dominantes, como o Pinterest, Twitter, e o Google Now muito caracterizados pelo uso de cartões. No Tuts+ também poderás encontrar cursos e os últimos artigos em toda a rede de front page usando o padrão de cartões.

O Tuts+ usa cartões para exibir a lista de cursos na página inicial.

Neste tutorial, vamos olhar para o componente de cartões no Material Design Lite (MDL). Segundo a especificação do Material Design, um cartão é:

"Uma folha de papel com informação única relacionada, que serve como ponto de entrada para informação mais detalhada.

Um cartão pode conter texto, uma imagem, uma combinação dos dois, e pode também incluir outros componentes MDL. No contexto da web geralmente usamos uma interface de cartão para apresentar listas de posts de blogs, notícias, vídeos, produtos e assim por diante.

Como acontece sempre nesta série, antes de podermos implementar alguma coisa, temos que carregar as bibliotecas MDL - as folhas de estilo e o JavaScript - no head de um documento html.

Assim que tivermos estes ficheiros no lugar, podemos começar a construir os cartões.

Vamos!

Para criar um Cartão, começamos com a div com a class mdl-card, e depois a classe mdl-shadow--2dp para aplicar a sombra ao cartão. Muda o número da class mdl-shadow--2dp para 3, 4, 6, 8 ou 16 para aumentar a intensidade e a propagação da sombra conforme necessário.

Neste momento, o Cartão está indefinido. Podemos definir o comprimento através do CSS por nós próprios, ou aplicar juntamente com o componente grelha do MDL. Eu faria com que o nosso cartão de demo fosse ágil e totalmente integrado com o ecossistema MDL, então vamos optar por este último. Envolvemos o mdl-card com um contentor tabela e definimos o próprio cartão como a célula ou coluna da tabela.

Conteúdo do cartão

Agora temos que determinar o conteúdo. Vamos assumir que queremos usar o cartão para exibir um post de blog. Tradicionalmente, isto pode consistir na imagem destacada do post, o título do post, e um típico botão "Ler Mais" apontando para o conteúdo completo.

Vamos começar com o título. Para adicionar um, cria uma div vazia com a class mdl-card_ _title.

Adiciona um heading dentro do div e applica a class mdl-card__title-text; dependendo da estrutura da tua página e do nível de conteúdo do cartão, podes adicionar um h1 a um h6.

Vamos agora adicionar um excerto - o resumo do conteúdo do post. Para tal, criamos outra div por baixo do container do título e aplicamos a class mdl-card__supporting-text. Depois, envolve o excerto com o elemento parágrafo e adiciona-o dentro da div.

Para a image de destaque do post, precisamos de criar outro elemento contentor (iremos para a figure) abaixo do contentor do título, com a class mdl-card__media. Os elementos figura têm alguma margem definida por defeito, então vamos ignorá-la, da seguinte forma:

Para finalizar, adiciona uma imagem.

Por defeito, o MDL não vai redimensionar a imagem dentro do contentor de mídia do cartão. Assim que o cartão é redimensionado, a largura e a altura da imagem é persistente. O contentor de mídia é definido para ocultar a imagem de transbordamento.

Por último, a imagem é desproporcionalmente alta, o que não faz com que o cartão esteja ótimo.

O cartão está excessivamente alto :(

Se quisermos que a imagem redimensione, seguindo o contentor, e mantendo o seu racio, teremos que adicionar alguns estilos, definindo a max-width da imagem para 100%.

A acção do cartão

Um cartão deve idealmente conter uma ação relacionada com o conteúdo do cartão. Se o cartão é um tweet, por exemplo, deve conter um botão de Retweet e um de Follow. Sendo que o nosso cartão é usado para exibir um post de blog, iremos adicionar um botão de Read More que aponta para todo o conteúdo do post, juntamente com alguns botões para like e partilhar o post. Adicionamos estes botões de acção por baixo do excerto do post, envolvidos dentro de uma nova div com a mdl-card_ _actions.

Nota: o MLD não vem com estilos pré-definidos que abranjam este cenário onde temos três botões no contentor das acções do cartão. Então temos que adicionar mais alguns estilos para apropriadamente alinhar estes botões.

Agora, adiciona mais alguns cartões para criar uma lista de posts.

Envolvendo

Exibir múltiplos posts de blogs é uma das implementações de interface de cartões mais populares em websites. Dizendo isto, o componente cartão pode na verdade ser adaptado para exibir qualquer tipo de conteúdo, mesmo uma simples imagem, um widget de calendário, or talvez informação sobre o tempo.

Alguns outros exemplos do componente cartão do MDL

No entanto, as classes standard na especificação do componente não incluem todos os estilos para esses cenários específicos. Prepara-te para adicionar nomes de classes personalizados e algumas regras extras para personalizar o aspecto do cartão de acordo com as tuas necessidades. Deixa-nos ver nos comentários o que atingiste!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.