Material Design Lite. Chip

У термина Chip нет устоявшего термина, будем называть компонент "кусочком". Кусочек - это маленький интерактивный элемент, обычно используемый для контактов, текста, значков и фотографий.

Класс MDL	Эффект	Примечание
mdl-chip	Определяет контейнер как кусочек	Обязательно для внешнего контейнера
mdl-chip--contact	Задаёт кусочку стиль контакта	Необязательный; используется во внешнем контейнере
mdl-chip__text	Задаёт элемент как текст кусочка	Обязательный; используется во внутреннем контейнере текста
mdl-chip__action	Задаёт элемент действия для кусочка	Обязательный во внутреннем контейнере, если он существует
mdl-chip__contact	Задаёт элемент как контейнер для контакта кусочка	Обязательный; используется во внутреннем контейнере контакта, если во внешнем контейнере есть класс mdl-chip--contact

Как создать компонент

Создайте элемент-контейнер, например, div или span (но любые другие контейнеры должны также работать). Если требуется интерактивность, используйте button или добавьте атрибут tabindex вашему контейнеру.

<span>
</span>

Добавьте в него внутренний контейнер для текста с MDL-классами.

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
</span>

Для удаляемых кусочков добавьте значок удаления. Это может быть a, button или span.

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

Контактные кусочки должны использовать класс mdl-chip--contact, добавляемый в контейнер. С ним должен быть контейнер для значка, используемый для фотографий. Обычно это img, но допустимы и другие элементы.

<span class="mdl-chip">
    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

Компонент готов к использованию.

Примеры

Базовый кусочек

Basic Chip

Удаляемый кусочек

Deletable Chip cancel

Кнопочный кусочек

Button Chip

Контактный кусочек

K Contact Chip

Удаляемый контактный кусочек

Deletable Contact Chip cancel

Примеры значков для класса material-icons смотрите здесь.

Вернуться на общую страницу Material Design Lite

Реклама