v-list
组件用于显示信息,它可以包含一个头像、内容、操作、列表组标题等等。列表也可以包含子元素并在侧边栏(sidebar)使用。
如果您要查找有状态列表项,请查看 v-list-item-group。
下面是一些简单到复杂的例子。
您不能与禁用的 v-list
互动。
形状列表在 v-list-item
的一侧具有圆形边界。
v-list
可以通过 dense
属性变密集。
在 flat
属性的 v-list
中选择时,项目不会发生变化。
你可以让 v-list
项变成圆角。
列表中还包含有插槽,可以采用更明确的方法。如果你选择了这种方法,请记住你必须提供额外的 props,以获得正确的间距。在这个例子中,我们有一个带头像的标题,所以我们必须提供一个 avatar
属性。
列表组件可以包含列表组标题,分割线,以及1行或者更多行,如果副标题文本溢出则会以省略号的形式截断文本
对于三行列表,字幕将垂直夹在 2 行,然后省略。 此功能使用 line-clamp ,并不是所有浏览器都支持此功能。
当使用一个 lists 插槽时,你必须手动定义它是否包含列表组标题(headers)或者列表项是否包含 avatar,这样做是为了确保正确的间距。
使用 v-list-group
组件,您可以使用 sub-group 属性创建多达 2 级的深度。
Lists 组件可以包含多个列表组标题和分割线。
一个列表可以和卡片组合。
列表组件可以包含一个操作栈。波纹效果和路由属性也可以应用到 v-list 甚至 v-list-item中,或者作为列表项数组的一个属性。
可操作的 three-line 列表。 利用 v-list-item-group,轻松将动作连接到图块。
列表可以包含一组项目,这些项目将在单击时显示。 扩展列表也用于 v-navigation-drawer 组件中。
列表可以接受一个替代的 nav 样式,它减少了 v-list-item
的宽度,并增加了一个边框半径。