VList API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| activatable | ||
| MISSING DESCRIPTION (edit in github ) | ||
| activated | ||
| Array of ids of activated nodes. | ||
| active-class | ||
| The class applied to the component when it is in an active state. | ||
| active-color | ||
| The applied color when the component is in an active state. | ||
| active-strategy | ||
| Affects how items with children behave when activated. leaf: Only leaf nodes (items without children) can be activated. independent: All nodes can be activated whether they have children or not. classic: Activating a parent node will cause all children to be activated. | ||
| base-color | ||
| Sets the color of component when not focused. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - 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 . | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| collapse-icon | ||
| MISSING DESCRIPTION (edit in github ) | ||
| 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 | ||
| Puts all children inputs into a disabled state. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| expand-icon | ||
| MISSING DESCRIPTION (edit in github ) | ||
| height | ||
| Sets the height for the component. | ||
| item-children | ||
| Property on supplied items that contains its children. | ||
| item-props | ||
| Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component. | ||
| item-title | ||
| Property on supplied items that contains its title. | ||
| item-type | ||
| Designates the key on the supplied items that is used for determining the nodes type. | ||
| item-value | ||
| Property on supplied items that contains its value. | ||
| items | ||
| Can be an array of objects or strings. By default objects should have a title property, and can optionally have a props property containing any VListItem props , a value property to allow selection, and a children property containing more item objects. Keys to use for these can be changed with the item-title, item-value, item-props, and item-children props. | ||
| lines | ||
| Designates a minimum-height for all children v-list-item components. This prop uses line-clamp and is not supported in all browsers. | ||
| mandatory | ||
| Forces at least one item to always be selected (if available). | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| nav | ||
| An alternative styling that reduces v-list-item width and rounds the corners. Typically used with v-navigation-drawer . | ||
| open-strategy | ||
| Affects how items with children behave when expanded. multiple: Any number of groups can be open at once. single: Only one group at each level can be open, opening a group will cause others to close. list: Multiple, but all other groups will close when an item is selected. | ||
| opened | ||
| An array containing the values of currently opened groups. Can be two-way bound with v-model:opened. | ||
| return-object | ||
| Changes the selection behavior to return the object directly rather than the value specified with item-value. | ||
| 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 . | ||
| select-strategy | ||
| Affects how items with children behave when selected. leaf: Only leaf nodes (items without children) can be selected. independent: All nodes can be selected whether they have children or not. classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model. | ||
| selectable | ||
| MISSING DESCRIPTION (edit in github ) | ||
| selected | ||
| An array containing the values of currently selected items. Can be two-way bound with v-model:selected. | ||
| slim | ||
| Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:activate | |
| MISSING DESCRIPTION (edit in github ) | |
| click:open | |
| MISSING DESCRIPTION (edit in github ) | |
| click:select | |
| MISSING DESCRIPTION (edit in github ) | |
| update:activated | |
| MISSING DESCRIPTION (edit in github ) | |
| update:opened | |
| MISSING DESCRIPTION (edit in github ) | |
| update:selected | |
| MISSING DESCRIPTION (edit in github ) | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| divider |
| MISSING DESCRIPTION (edit in github ) |
| header |
| MISSING DESCRIPTION (edit in github ) |
| item |
| Define a custom item appearance. |
| prepend |
| Adds an item outside the input and before input content. |
| subheader |
| MISSING DESCRIPTION (edit in github ) |
| subtitle |
| Slot for the component’s subtitle content. |
| title |
| Slot for the component’s title content. |
可用属性
| children |
| MISSING DESCRIPTION (edit in github ) |
| focus |
| MISSING DESCRIPTION (edit in github ) |
| open |
| MISSING DESCRIPTION (edit in github ) |
| parents |
| MISSING DESCRIPTION (edit in github ) |
| select |
| The function used to select an items. The first argument expects the value of the item. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $list-background | |
| $list-border | |
| $list-border-color | |
| $list-border-radius | |
| $list-border-style | |
| $list-border-thin-width | |
| $list-border-width | |
| $list-color | |
| $list-density | |
| $list-disabled-opacity | |
| $list-elevation | |
| $list-indent-size | |
| $list-item-action-margin-end | |
| $list-item-action-margin-start | |
| $list-item-action-spacer-width | |
| $list-item-avatar-align-self | |
| $list-item-avatar-margin-end | |
| $list-item-avatar-margin-start | |
| $list-item-avatar-margin-y | |
| $list-item-avatar-size | |
| $list-item-border | |
| $list-item-border-color | |
| $list-item-border-radius | |
| $list-item-border-style | |
| $list-item-border-thin-width | |
| $list-item-border-width | |
| $list-item-elevation | |
| $list-item-icon-active-opacity | |
| $list-item-icon-margin-end | |
| $list-item-icon-margin-start | |
| $list-item-icon-opacity | |
| $list-item-icon-size | |
| $list-item-media-margin-bottom | |
| $list-item-media-margin-end | |
| $list-item-media-margin-start | |
| $list-item-media-margin-top | |
| $list-item-media-three-line-margin-bottom | |
| $list-item-media-three-line-margin-top | |
| $list-item-media-two-line-margin-bottom | |
| $list-item-media-two-line-margin-top | |
| $list-item-min-height | |
| $list-item-nav-margin-top | |
| $list-item-nav-subtitle-font-size | |
| $list-item-nav-subtitle-font-weight | |
| $list-item-nav-subtitle-letter-spacing | |
| $list-item-nav-subtitle-line-height | |
| $list-item-nav-subtitle-typography | |
| $list-item-nav-title-font-size | |
| $list-item-nav-title-font-weight | |
| $list-item-nav-title-letter-spacing | |
| $list-item-nav-title-line-height | |
| $list-item-nav-title-typography | |
| $list-item-one-line-min-height | |
| $list-item-one-line-padding | |
| $list-item-padding | |
| $list-item-plain-opacity | |
| $list-item-prepend-size | |
| $list-item-rounded-border-radius | |
| $list-item-slim-action-spacer-width | |
| $list-item-slim-avatar-spacer-width | |
| $list-item-slim-icon-margin | |
| $list-item-slim-prepend-size | |
| $list-item-slim-spacer-width | |
| $list-item-subtitle-font-size | |
| $list-item-subtitle-font-weight | |
| $list-item-subtitle-letter-spacing | |
| $list-item-subtitle-line-height | |
| $list-item-subtitle-opacity | |
| $list-item-subtitle-overflow-wrap | |
| $list-item-subtitle-padding | |
| $list-item-subtitle-text-transform | |
| $list-item-subtitle-typography | |
| $list-item-subtitle-word-break | |
| $list-item-three-line-min-height | |
| $list-item-three-line-padding | |
| $list-item-title-font-size | |
| $list-item-title-font-weight | |
| $list-item-title-header-padding | |
| $list-item-title-hyphens | |
| $list-item-title-letter-spacing | |
| $list-item-title-line-height | |
| $list-item-title-overflow-wrap | |
| $list-item-title-padding | |
| $list-item-title-text-overflow | |
| $list-item-title-text-transform | |
| $list-item-title-typography | |
| $list-item-title-word-break | |
| $list-item-title-word-wrap | |
| $list-item-two-line-min-height | |
| $list-item-two-line-padding | |
| $list-item-variants | |
| $list-nav-padding | |
| $list-nav-subheader-font-size | |
| $list-padding | |
| $list-rounded-border-radius | |
| $list-subheader-color | |
| $list-subheader-font-size | |
| $list-subheader-font-weight | |
| $list-subheader-inset-margin | |
| $list-subheader-inset-padding-start | |
| $list-subheader-line-height | |
| $list-subheader-min-height | |
| $list-subheader-min-height-multiplier | |
| $list-subheader-padding-end | |
| $list-subheader-padding-start | |
| $list-subheader-padding-top | |
| $list-subheader-text-opacity | |
| $list-subheader-transition | |
| $list-theme | |