VChip API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active-class | ||
| The class applied to the component when it matches the current route. Find more information about the active-class prop on the vue-router documentation. | ||
| append-avatar | ||
| Appends a v-avatar component after default content in the append slot. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| closable | ||
| Adds remove button and then a chip can be closed. | ||
| close-icon | ||
| Change the default icon used for close chips. | ||
| close-label | ||
| Text used for aria-label on the close button in close chips. Can also be customized globally in Internationalization . | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| draggable | ||
| Makes the chip draggable. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| exact | ||
| Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation. | ||
| filter | ||
| Displays a selection icon when selected. | ||
| filter-icon | ||
| Change the default icon used for filter chips. | ||
| href | ||
| Designates the component as anchor and applies the href attribute. | ||
| label | ||
| Applies a medium size border radius. | ||
| link | ||
| Designates that the component is a link. This is automatic when using the href or to prop. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| pill | ||
| Remove v-avatar padding. | ||
| prepend-avatar | ||
| Prepends a v-avatar component in the prepend slot before default content. | ||
| prepend-icon | ||
| Creates a v-icon component in the prepend slot before default content. | ||
| replace | ||
| Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation. | ||
| ripple | ||
| Applies the v-ripple directive. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| selected-class | ||
| Configure the active CSS class applied when an item is selected. | ||
| size | ||
| Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| text | ||
| Specify content text for the component. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| to | ||
| Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation. | ||
| value | ||
| The value used when a child of a v-chip-group . | ||
| variant | ||
| Applies a distinct style to the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click | |
| Emitted when component is clicked, toggles chip if contained in a chip group - Will trigger component to ripple when clicked unless the .native modifier is used. | |
| click:close | |
| Emitted when close icon is clicked. | |
| clickOnce | |
| MISSING DESCRIPTION (edit in github ) | |
| group:selected | |
| Event that is emitted when an item is selected within a group. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| close |
| Slot for icon used in close prop. |
| default |
| The default Vue slot. |
| filter |
| Slot for icon used in filter prop. |
| label |
| The default slot of the v-label or v-field-label component. |
| prepend |
| Adds an item outside the input and before input content. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $chip-background | |
| $chip-border | |
| $chip-border-color | |
| $chip-border-radius | |
| $chip-border-style | |
| $chip-border-thin-width | |
| $chip-border-width | |
| $chip-close-size | |
| $chip-color | |
| $chip-density | |
| $chip-disabled-opacity | |
| $chip-elevation | |
| $chip-filter-transition | |
| $chip-font-size | |
| $chip-font-weight | |
| $chip-height | |
| $chip-icon-size-multiplier | |
| $chip-label-border-radius | |
| $chip-max-width | |
| $chip-overflow | |
| $chip-padding-ratio | |
| $chip-plain-opacity | |
| $chip-sizes | |
| $chip-variants | |
| $chip-white-space | |