От автора: карточки быстро заняли свое место в пользовательских интерфейсах, особенно на мобильных устройствах. Спасибо можно сказать крупным известным сайтам, таким как Pinterest, Twitter и Google Now. На нашем сайте Tuts+ на главной странице вам также представлены различные курсы или просто последние статьи в карточном стиле.
Material Design Lite как использовать
В этом уроке мы подробно разберем компонент карточки в MDL. Из спецификации следует, что карточка это:
«Небольшой кусочек бумаги с уникальными данными, который служит точкой входа для получения более подробной информации.»
В карточке может быть текст, изображение, или даже комбинация обоих, также карточка может содержать и другие компоненты MDL. В интернете мы, в основном, используем данный шаблон, для отображения последних постов в блоге, новостей, видео, товаров и т.д.
Material Design Lite — что это?
Material Design Lite — это новый фреймворк от Google, фреймворк для веб-разработчиков, позволяющий верстать страницы просто и быстро.
Как и в предыдущих уроках, сначала требуется подключить MDL библиотеки – стили и файлы JS в шапке документа.
|
1 2 3 4 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link href='//fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Поставив все файлы на место, теперь мы можем приступить к делу.
Поехали!
Для создания карточки необходимо добавить блок DIV с классом mdl-card и mdl-shadow—2dp, второй класс добавит тень под карточкой. Размер тени можно увеличить, изменив название второго класса. 2dp можно заменить на набор цифр от 3 до 16.
|
1 |
<div class="mdl-card mdl-shadow--2dp"></div> |
У нас пока еще не задана ширина. Сделать это можно напрямую через CSS или с помощью компонента MDL grid. Наше демо в данном уроке я хотел бы сделать адаптивным и максимально интегрированным в MDL, так что мы выберем последний вариант. Обернем блок mdl-card новым контейнером с классом mdl-grid.
|
1 2 3 4 |
<div class="mdl-grid"> <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> </div> </div> |
Контент карточки
Теперь необходимо определиться с контентом. Предположим, что наши карточки будут использоваться в блоге. Обычно в посте содержится картинка, заголовок новости, краткий отрывок новости и стандартная кнопка «Подробнее», которая отсылает нас на полный текст статьи. Начнем с заголовка. Чтобы его добавить, создадим DIV с классом mdl-card__title.
|
1 2 3 4 5 |
<div class="mdl-grid"> <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> <div class="mdl-card__title"></div> </div> </div> |
Внутри этого блока создайте тег заголовка с классом mdl-card__title-text; в зависимости от структуры страницы и уровня контента в карточке заголовок может быть от h1 до h6.
|
1 2 3 4 5 6 7 |
<div class="mdl-grid"> <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Learning Web Design</h2> </div> </div> </div> |
Добавим краткий текст статьи. Создадим новый DIV под заголовком с классом mdl-card__supporting-text. Аннотация поста будет находиться в теге p.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="mdl-grid"> <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> <div class="mdl-card__title"> <h1 class="mdl-card__title-text">Learning Web Design</h1> </div> <div class="mdl-card__supporting-text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p> </div> </div> </div> |
Чтобы добавить картинку к новости, над блоком с заголовком необходимо создать тег figure с классом mdl-card__media. У данного элемента по умолчанию есть маленькие отступы, так что давайте их уберем:
|
1 2 3 |
.mdl-card__media { margin: 0; } |
Финальный код с изображением:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> <figure class="mdl-card__media"> <img src="/images/laptop.jpg" alt="" /> </figure> <div class="mdl-card__title"> <h1 class="mdl-card__title-text">Learning Web Design</h1> </div> <div class="mdl-card__supporting-text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p> </div> </div> ... |
По умолчанию в MDL изображение не растягивается при изменении размера карточки, т.е. если увеличить карточку, то изображение останется того же размера. Медиа контейнер, в котором находится изображение, прячет выходящие за его границы части картинки. Не самым лучшим решением будет использовать крайне длинные изображения:
Карточка слишком высокая 🙁
Чтобы изображение изменялось в размерах вместе с контейнером и сохраняло свои пропорции, необходимо прописать максимальную ширину изображения в 100%.
Взаимодействие с карточкой
В карточке должен быть тщательно подобран набор действий, которые подходят по тематике контента. Если это твит, к примеру, то обязательно должны быть кнопки Retweet и Follow. Так как у нас карточка это пост в блоге, то у нас точно будет кнопка «Подробнее», также будут кнопки лайк и поделиться. Все эти кнопки мы добавим под аннотацией к статье в блоке DIV с классом mdl-card__actions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
... <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp"> <figure class="mdl-card__media"> <img src="//tfirdaus.github.io/mdl/images/laptop.jpg" alt="" /> </figure> <div class="mdl-card__title"> <h1 class="mdl-card__title-text">Learning Web Design</h1> </div> <div class="mdl-card__supporting-text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p> </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a> <div class="mdl-layout-spacer"></div> <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button> <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button> </div> </div> ... |
Заметьте: в MDL не прописаны стили по умолчанию для сценария с тремя кнопками. Необходимо добавить парочку своих стилей, чтобы выровнять кнопки.
|
1 2 3 4 5 6 7 8 9 |
.mdl-card__actions { display: flex; box-sizing:border-box; align-items: center; } .mdl-card__actions > .mdl-button--icon { margin-right: 3px; margin-left: 3px; } |
И чтобы все это лучше смотрелось, добавим парочку карточек:
Заключение
Использование карточек для отображения последних новостей в блогах это один из самых распространенных подходов. Шаблон карточки можно адаптировать для отображения самого различного контента, от изображения или виджета календаря и до погоды.
Тем не менее, в стандартных классах не прописаны стили для всех сценариев. Так что вам придется самому добавлять новые классы и стили, если вы хотите настроить внешний вид как-то по-другому. Делитесь в комментариях своими работами!
Автор: Thoriq Firdaus
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
