列表

列表是文本或图像的连续垂直索引。

列表是文本或图像的连续组。它们由包含主要和辅助操作的项目组成，这些操作由图标和文本表示。

简介

列表通过文本或图像的连续垂直索引，以简洁易懂的格式呈现信息。

Material UI 列表使用相关组件的集合来实现

• List：列表项的包装器。默认渲染为 <ul>。
• List Item：通用的列表项。默认渲染为 <li>。
• List Item Button：用于列表项内部的操作元素。
• List Item Icon：用于列表项内部的图标。
• List Item Avatar：用于列表项内部的头像。
• List Item Text：列表项内部的容器，用于显示文本内容。
• List Divider：列表项之间的分隔线。
• List Subheader：嵌套列表的标签。

上一个演示的最后一个项目展示了如何渲染链接

<ListItemButton component="a" href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemButton>

您可以在文档的此部分找到使用 React Router 的演示。

基础知识

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

嵌套列表

文件夹列表

交互式

以下是一个交互式演示，可让您探索不同设置的视觉效果

选中的 ListItem

对齐列表项

当显示三行或更多行时，头像不会在顶部对齐。您应该设置 alignItems="flex-start" 属性以按照 Material Design 指南将头像在顶部对齐

列表控件

复选框

复选框可以是主要操作或辅助操作。

复选框是列表项的主要操作和状态指示器。评论按钮是辅助操作和一个单独的目标。

复选框是列表项的辅助操作和一个单独的目标。

开关

开关是辅助操作和一个单独的目标。

粘性子标题

滚动时，子标题保持固定在屏幕顶部，直到被下一个子标题推出屏幕。此功能依赖于 CSS sticky 定位。

内嵌列表项

inset 属性使没有前导图标或头像的列表项能够与有图标或头像的项目正确对齐。

无间距列表

在定义了自己的间距的组件中渲染列表时，可以使用 disableGutters 禁用 ListItem 间距。

虚拟化列表

在以下示例中，我们演示了如何将 react-window 与 List 组件一起使用。它渲染 200 行，并且可以轻松处理更多行。虚拟化有助于解决性能问题。

鼓励尽可能使用 react-window。如果此库不能满足您的用例，您应该考虑使用 react-virtuoso 等替代方案。

自定义

以下是一些自定义组件的示例。您可以在覆盖文档页面中了解更多信息。

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

• <Collapse />
• <Divider />
• <List />
• <ListItem />
• <ListItemAvatar />
• <ListItemButton />
• <ListItemIcon />
• <ListItemSecondaryAction />
• <ListItemText />
• <ListSubheader />