Vuetify

商店

企业版

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

列表有三个主要变量。single-line (默认), two-linethree-line。 行声明指定了项目的最小高度,也可以使用相同的属性从 v-list 中进行控制。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

您不能与禁用的 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 的宽度,并增加了一个边框半径。

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