Vuetify

Магазин

Для бизнеса

The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. This component is used by the v-chip-group for advanced selection options.

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.

Options

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

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

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

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

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

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

draggable v-chip component can be dragged by mouse.

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

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.

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

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

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.

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.

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

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!