# Lists(列表)

v-list 组件用于显示信息。 它可以包含头像、内容、操作、列表组标题等等。 列表以易于在集合中识别特定项目的方式显示内容。 它们为组织一组文本和图像提供了一致的样式。

# 使用

列表有三种基本形式。 单行 (默认), 双行三行. 行声明指定了项目的最小高度,也可以使用相同的属性从 v-list 中进行控制。


# 注意

# 示例

# 属性

# 密集

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.


继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:05/20/2022, 4:10:15 PM