Компонент v-chip используется для передачи небольших фрагментов информации. Используя свойство close, чип становится интерактивным, что позволяет взаимодействовать с пользователем.

Usage

Chips come in the following variations: Default, closeable, filter, outlined, pill. The default slot of v-chip will also accept avatars and icons alongside text.

API

Примеры

Цветной

Любой цвет из палитры Material Design можно использовать для изменения цвета чипов.

Иконка

Chips могут использовать текст или любой значок, доступный в библиотеке шрифтов Material Icons.

Outlined

Очерченные chips наследуют свой цвет границы от текущего цвета текста.

Метка

В метки chips используется border-radius v-card.

Sizes

v-chip component can have various sizes from x-small to x-large.

Draggable

draggable v-chip component can be dragged by mouse.

Filter

v-chip component has filter option which shows an additional icon to you if chip is active. It can be customized using filter-icon.

No ripple

v-chip can be rendered without ripple if ripple prop is set to false.

Перекрываемый

Closable chips can be controlled with a v-model. You can also listen to the click:close event if you want to know when a chip has been closed.

Action chips

Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.

В выборе

Выбор позволяет использовать чипы для отображения выбранных данных.

Custom lists

In this example we opt to use a customized list instead of v-autocomplete. This allows us to always display the options available while still providing the same functionality of search and selection.

Additional filtering

Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.

Expandable

Chips can be combined with v-menu to enable a specific set of actions for a chip.

Edit this page on Github | Translate on Crowdin
Vuetify
МагазинДля бизнеса