ChipЧип

Чип помогает пользователю вводить информацию, делать выбор, фильтровать контент или выполнять связанные действия.

Использование

При необходимости импортируйте компонент:

import 'mdui/components/chip.js';

При необходимости импортируйте типы TypeScript:

import type { Chip } from 'mdui/components/chip.js';

Пример использования:

Chip

<mdui-chip>Chip</mdui-chip>

После добавления атрибута deletable справа от чипа появляется иконка удаления. Нажатие на эту иконку вызывает событие delete. Вы можете указать иконку удаления через атрибут delete-icon или слот delete-icon.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Вариант чипа. Возможные значения: `assist` — используется для отображения вспомогательных действий, связанных с текущим контекстом, например «Поделиться», «В избранное» на странице заказа `filter` — используется для фильтрации содержимого, например фильтрация результатов поиска `input` — используется для представления фрагментов информации, введённых пользователем, например контакты в поле «Кому» в Gmail `suggestion` — используется для предоставления динамически генерируемых рекомендаций для упрощения действий пользователя, например предсказание сообщений в чат-приложении
`elevated`	`elevated`	`boolean`	`false`
Определяет, отображать ли тень.
`selectable`	`selectable`	`boolean`	`false`
Определяет, можно ли выбрать.
`selected`	`selected`	`boolean`	`false`
Определяет, выбран ли чип.
`deletable`	`deletable`	`boolean`	`false`
Определяет, можно ли удалить. При `true` справа от чипа отображается иконка удаления.
`icon`	`icon`	`string`	-
Имя иконки Material Icons слева. Можно задать через `slot="icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Имя иконки Material Icons слева в выбранном состоянии. Можно задать через `slot="selected-icon"`.
`end-icon`	`endIcon`	`string`	-
Имя иконки Material Icons справа. Можно задать через `slot="end-icon"`.
`delete-icon`	`deleteIcon`	`string`	-
Имя иконки Material Icons для удаления справа, когда чип удаляемый. Можно задать через `slot="delete-icon"`.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.
`disabled`	`disabled`	`boolean`	`false`
Отключает элемент.
`loading`	`loading`	`boolean`	`false`
Переводит элемент в состояние загрузки.
`name`	`name`	`string`	`''`
Имя кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`value`	`value`	`string`	`''`
Значение кнопки, которое будет отправлено вместе с данными формы. Примечание: Это свойство действует, только если не задано свойство `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Тип кнопки. По умолчанию `button`. Возможные значения: `submit` — эта кнопка отправляет данные формы на сервер `reset` — эта кнопка сбрасывает все компоненты к начальным значениям `button` — эта кнопка не имеет поведения по умолчанию Примечание: Это свойство действует, только если не задано свойство `href`.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`. Примечание: Это свойство действует, только если не задано свойство `href`.
`formaction`	`formAction`	`string`	-
Задаёт URL-адрес для отправки формы. Если это свойство задано, оно переопределяет атрибут `action` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Определяет способ кодирования данных при отправке формы на сервер. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию, если атрибут не указан `multipart/form-data` — используется, когда форма содержит элемент `<input type="file">` `text/plain` — добавлено в HTML5; используется для отладки Если это свойство задано, оно переопределяет атрибут `enctype` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Определяет HTTP-метод, который используется при отправке формы. Возможные значения: `post` — данные формы отправляются на сервер в теле запроса `get` — данные формы добавляются к URI формы после символа `?`, и полученный URI отправляется на сервер. Используется, если форма не имеет побочных эффектов и содержит только ASCII-символы. Если это свойство задано, оно переопределяет атрибут `method` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Если задано, проверка формы при отправке не выполняется. Если задано, переопределяет атрибут `novalidate` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Определяет, где будет показан ответ, полученный после отправки формы. Возможные значения: `_self` — по умолчанию, открывается в текущем фрейме `_blank` — открывается в новом окне `_parent` — открывается в родительском фрейме `_top` — открывается во всём окне Если это свойство задано, оно переопределяет атрибут `target` элемента `<form>`. Примечание: Это свойство действует, только если не задано свойство `href` и `type="submit"`.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`invalid`
Возникает, когда поле формы не проходит валидацию.
`change`
Срабатывает при изменении состояния выбора.
`delete`
Срабатывает при клике на иконку удаления.

Slots

Название
(по умолчанию)
Текст чипа.
`icon`
Элемент слева.
`end-icon`
Элемент справа.
`selected-icon`
Элемент слева в выбранном состоянии.
`delete-icon`
Элемент удаления справа, когда чип удаляемый.

CSS Parts

Название
`button`
Внутренний элемент `<button>` или `<a>`.
`label`
Текст чипа.
`icon`
Иконка слева.
`end-icon`
Иконка справа.
`selected-icon`
Иконка слева в выбранном состоянии.
`delete-icon`
Иконка удаления справа, когда чип удаляемый.
`loading`
Элемент `<mdui-circular-progress>` в состоянии загрузки.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

Checkbox Чекбокс

Следующая глава

CircularProgress Круговой индикатор прогресса

ChipЧип

Использование

Примеры

Вариант

Тень

Иконка

Ссылка

Отключенное состояние и состояние загрузки

Выбираемый

Удаляемый