Як використовувати Material Design Lite: Картки

16

Від автора: картки швидко зайняли своє місце в користувацьких інтерфейсах, особливо на мобільних пристроях. Спасибі можна сказати великим відомим сайтам, таким як Pinterest, Twitter і Google Now. На нашому сайті Tuts+ на головній сторінці вам також представлені різні курси або просто останні статті в картковому стилі.

Як використовувати Material Design Lite: Картки

Material Design Lite як використовувати

У цьому уроці ми детально розберемо компонент картки в MDL. Специфікації слід, що картка це:

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

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

Material Design Lite — що це?

Material Design Lite — це новий фреймворк від Google, фреймворк для веб-розробників, що дозволяє верстати сторінки просто і швидко.

Як і в попередніх уроках, спочатку потрібно підключити MDL бібліотеки – стилі і JS файли у шапці документа.

Поставивши всі файли на місце, тепер ми можемо приступити до справи.

Поїхали!

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

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

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

Тепер необхідно визначитися з контентом. Припустимо, що наші картки будуть використовуватися в блозі. Зазвичай в пості міститься картинка, заголовок новини, короткий уривок новини і стандартна кнопка «Детальніше», яка відсилає нас на повний текст статті. Почнемо з заголовка. Щоб його додати, створимо DIV з класом mdl-card__title.

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

Learning Web Design

Додамо короткий текст статті. Створимо новий DIV під заголовком з класом mdl-card__supporting-text. Анотація поста буде перебувати в тезі p.

Learning Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.

Щоб додати зображення до новини, над блоком із заголовком необхідно створити тег figure з класом mdl-card__media. У даного елемента за замовчуванням є маленькі відступи, так що давайте їх приберемо:

.mdl-card__media {
margin: 0;
}

Фінальний код з зображенням:

Як використовувати Material Design Lite: Картки

Learning Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.

За замовчуванням в MDL зображення не розтягується при зміні розміру картки, тобто якщо збільшити картку, то зображення залишиться того ж розміру. Медіа контейнер, в якому знаходиться зображення, ховає виходять за його межі частини картинки. Не найкращим рішенням буде використовувати вкрай довгі зображення:

Як використовувати Material Design Lite: Картки

Картка занадто висока Як використовувати Material Design Lite: Картки

Щоб зображення змінювалося в розмірах разом з контейнером і зберігало свої пропорції, необхідно прописати максимальну ширину зображення в 100%.

Взаємодія з карткою

У картці повинен бути ретельно підібраний набір дій, які підходять по тематиці контенту. Якщо це твіт, приміром, то обов’язково повинні бути кнопки Retweet і Follow. Так як у нас картка це пост в блозі, то у нас точно буде кнопка «Детальніше», також будуть кнопки лайк і поділитися. Всі ці кнопки ми додамо під анотацією до статті в блоці DIV з класом mdl-card__actions.

Як використовувати Material Design Lite: Картки

Learning Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.

Read More

favorite
share

Зауважте: в MDL не прописані стилі за замовчуванням для сценарію з трьома кнопками. Необхідно додати парочку своїх стилів, щоб вирівняти кнопки.

.mdl-card__actions {
display: flex;
box-sizing:border-box;
align-items: center;
}
.mdl-card__actions > .mdl-button—icon {
margin-right: 3px;
margin-left: 3px;
}

І щоб все це краще виглядало, додамо кілька карток:

Висновок

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

Як використовувати Material Design Lite: Картки

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