# 列表 (Lists)
v-list
组件用于显示信息。 它可以包含头像、内容、操作、列表组标题等等。 列表以易于在集合中识别特定项目的方式显示内容。 它们为组织一组文本和图像提供了一致的样式。
# 使用
列表有三种基本形式。 单行 (默认), 双行 和 三行. 行声明指定了项目的最小高度,也可以使用相同的属性从 v-list
中进行控制。
# API
# 注意
如果您要查找有状态列表项,请查看 v-list-item-group。
# 示例
# 属性
# 密集
v-list
可以通过 dense 属性来减小高度。
# 禁用
您不能与已禁用的 v-list
交互。
# 扁平
Items don’t change when selected in v-list
with flat property.
# 导航列表
Lists can receive an alternative nav styling that reduces the width v-list-item
takes up as well as adding a border radius.
# Rounded(圆角)
You can make v-list
items rounded.
# 形状列表
Shaped lists have rounded borders on one side of the v-list-item
.
# 嵌套列表
Using the v-list-group
component you can create up to 2 levels in depth using the sub-group prop.
# 三行
For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.
# 两行和副标题
Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.
# 插槽
# 可展开的列表
A list can contain a group of items which will display on click utilizing v-list-group
's activator
slot. Expansion lists are also used within the v-navigation-drawer component.
# 其他
# 操作和项目组
A three-line list with actions. Utilizing v-list-item-group, easily connect actions to your tiles.
# 操作栈
A list can contain a stack within an action. This is useful when you need to display meta text next to your action item.
# 卡片列表
A list can be combined with a card.
# 简单头像列表
A simple list utilizing v-list-item-icon
, v-list-item-title
and v-list-item-avatar
.
# 单行列表
Here we combine v-list-item-avatar and v-list-item-icon in a single-line list.
# 列表组标题和分割线
Lists can contain multiple subheaders and dividers.