列表

v-list 组件用于显示信息,它可以包含一个头像、内容、操作、列表组标题等等。列表也可以包含子元素并在侧边栏(sidebar)使用。

用例

Lists can take an array of list items. When given an array, the list component will figure out the classes that are needed depending on what it was given. You can also define headers or dividers within the items array.

API

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
dense
默认值
false
类型
boolean

减小列表块的最大宽度

名称
expand
默认值
false
类型
boolean

将只有在明确关闭后才会折叠起来

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
subheader
默认值
false
类型
boolean

会移除上边距(top padding),当前面只有一个列表组标题的时候使用

名称
three-line
默认值
false
类型
boolean

增加列表块的高度到3行

名称
two-line
默认值
false
类型
boolean

增加列表块的高度到2行

示例

头像和列表项标题以及操作的组合

列表组件还提供了用于更明确做法的插槽,如果你选择这种方法,切记必须提供附加属性来确保正确的间距。在这个例子中,有一个带有头像的图块,所以我们必须提供 avatar 属性。

图标加两行内容以及操作的组合

列表组件可以包含列表组标题,分割线,以及1行或者更多行,如果副标题文本溢出则会以省略号的形式截断文本

头像和三行的组合

对于3行的列表,列表项副标题内容占两行的时候如果超出范围则以省略号形式截断文字,如果你需要超过3行,建议使用 card组件。

头像和标题以及操作的组合

当使用一个 lists 插槽时,你必须手动定义它是否包含列表组标题(headers)或者列表项是否包含 avatar,这样做是为了确保正确的间距。

列表组标题和分割线

Lists 组件可以包含多个列表组标题和分割线。

图像卡片和工具栏以及列表的组合

一个列表可以和卡片组合。

列表项的标题和子标题, 操作与操作文本说明

列表组件可以包含一个操作栈。波纹效果和路由属性也可以应用到 v-list 甚至 v-list-tile中,或者作为列表项数组的一个属性。

操作和标题以及副标题的组合

一个列表项最多包含3行。

可展开的列表

一个列表项可以包含一组在点击时展开的项,可展开的列表也可以在 navigation drawer 组件中使用。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore