Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite

Изучаем Material Design Lite: Карточки

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Text Fields
Learning Material Design Lite: The Menu

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Карточки быстро заняли свое место в пользовательских интерфейсах, особенно на мобильных устройствах. Такая ситуация сложилась во многом благодаря популярным сайтам, таким как Pinterest, Twitter, и Google Now в которых карточки активно используются. На нашем сайте Tuts+ на главной странице вам также представлены различные курсы или просто последние статьи в карточном стиле.

Tuts+ использует карточки при отображении курсов на заглавной странице.

В этом уроке мы подробно разберем компонент карточки в MDL. Из спецификации следует, что карточка это:

«Небольшой кусочек бумаги с уникальными данными, который служит точкой входа для получения более подробной информации.»

В карточке может быть текст, изображение, или даже комбинация обоих, также карточка может содержать и другие компоненты MDL. В интернете мы, в основном, используем данный шаблон, для отображения последних постов в блоге, новостей, видео, товаров и т.д.

Как и раньше в этой серии уроков, прежде чем использовать что-то необходимо нам нужно будет загрузить компоненты MDL библиотек - файлы стилей и JavaScript - в разделе head HTML документа.

Поставив все файлы на место, теперь мы можем приступить к делу.

Поехали!

Для создания карточки необходимо добавить блок div с классом mdl-card и mdl-shadow—2dp, второй класс добавит тень под карточкой. Размер тени можно увеличить, изменив название второго класса. mdl-shadow--2dp можно заменить на набор цифр от 3 до 16.

У нас пока еще не задана ширина. Сделать это можно напрямую через CSS или с помощью компонента MDL grid. Наше демо в данном уроке я хотел бы сделать адаптивным и максимально интегрированным в MDL, так что мы выберем последний вариант. Обернем блок mdl-card новым контейнером с классом mdl-grid.

Контент карточки

Теперь необходимо определиться с контентом. Предположим, что наши карточки будут использоваться в блоге. Обычно в посте содержится картинка, заголовок новости, краткий отрывок новости и стандартная кнопка «Подробнее», которая отсылает нас на полный текст статьи.

Начнем с заголовка. Чтобы его добавить, создадим div с классом mdl-card__title.

Внутри этого div блока создайте тег заголовка с классом mdl-card__title-text; в зависимости от структуры страницы и уровня контента в карточке заголовок может быть от h1 до h6.

Добавим краткий текст статьи. Создадим новый div под заголовком с классом mdl-card__supporting-text. Аннотация поста будет находиться в теге p. Обернем описание в параграф и добавим его в div.

Чтобы добавить картинку к новости, над блоком с заголовком необходимо создать тег figure с классом mdl-card__media. У данного элемента по умолчанию есть маленькие отступы, так что давайте их уберем:

И наконец добавим изображение.

По умолчанию в MDL изображение не меняет размер изображения внутри медиа-контейнера. При изменении размера карты, ширина и высота картинки остаются неизменными. Медиа контейнер, в котором находится изображение, прячет выходящие за его границы части картинки.

Не самым лучшим решением будет использовать крайне длинные изображения.

Карточка слишком удлиненная :(

Чтобы изображение изменялось в размерах вместе с контейнером и сохраняло свои пропорции, необходимо прописать max-width изображения в 100%.

Взаимодействие с карточкой

В карточке должен быть тщательно подобран набор действий, которые подходят по тематике контента. Если это твит, к примеру, то обязательно должны быть кнопки Retweet и Follow. Так как у нас карточка это пост в блоге, то у нас точно будет кнопка «Подробнее», также будут кнопки лайк и поделиться. Все эти кнопки мы добавим под аннотацией к статье в блоке div с классом mdl-card__actions.

Примечание: в MDL не прописаны стили по умолчанию для сценария с тремя кнопками. Необходимо добавить парочку своих стилей, чтобы выровнять кнопки.

И чтобы все это лучше смотрелось, добавим парочку карточек:

Заключение

Использование карточек для отображения последних новостей в блогах это один из самых распространенных подходов. Шаблон карточки можно адаптировать для отображения самого различного контента, от изображения или виджета календаря и до погоды.

Еще несколько примеров карточек из арсенала MDL

Тем не менее, в стандартных классах не прописаны стили для всех сценариев. Так что вам придется самому добавлять новые классы и стили, если вы хотите настроить внешний вид как-то по-другому. Делитесь в комментариях своими работами!

Advertisement
Advertisement
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.