跳转到内容
编辑此页面

List 列表

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

列表能够承载一组连续的文本或图像。 它们由包含主要和补充操作的项子集组成，而这些操作由图标和文本表示。

Basic List

上一个样例的最后一个子集展示了如何渲染一个链接：

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

你可以从这里查看 React Router 与文档此部分结合使用的相关样例。

嵌套列表

文件夹列表

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

交互式

下面是一个交互式的演示，你也可以探索不同设置下的视觉结果：

Text only
  • Single-line item
  • Single-line item
  • Single-line item
Icon with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text and icon
  • Single-line item
  • Single-line item
  • Single-line item

可选的列表子项

对齐列表项

When displaying three lines or more, the avatar is not aligned at the top. When displaying three lines or more, the avatar is not aligned at the top. When displaying three lines or more, the avatar is not aligned at the top. You should set the alignItems="flex-start" prop to align the avatar at the top, following the Material Design guidelines:

  • Remy Sharp
    Brunch this weekend?

    Ali Connors — I'll be in your neighborhood doing errands this…

  • Travis Howard
    Summer BBQ

    to Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…

  • Cindy Baker
    Oui Oui

    Sandra Adams — Do you have Paris recommendations? Have you ever…

列表控件

Checkbox 选择框

一个选择框既可以是主操作，又可以是辅助操作。

选择框执行了主要的操作，也是该列表子项的状态指示器。 而评论按钮则执行了辅助的操作，并且一个单独的目标。

  • Line item 1
  • Line item 2
  • Line item 3
  • Line item 4

该复选框执行了列表项的辅助操作，并且是一个单独的目标。

  • Avatar n°1
    Line item 1
  • Avatar n°2
    Line item 2
  • Avatar n°3
    Line item 3
  • Avatar n°4
    Line item 4

Switch 开关

该开关作用为一个辅助操作和一个单独的目标。

  • Settings
  • Wi-Fi
  • Bluetooth

Sticky subheader

在滚动列表时，子标题保持固定在屏幕的顶端，直到被下一个子标题推离屏幕。 此性能由 CSS sticky 位置实现。 (⚠️ no IE 11 support)

    • I'm sticky 0
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 1
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 2
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 3
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 4
    • Item 0
    • Item 1
    • Item 2

对齐列表项

inset 属性可以让没有前导（leading）图标或头像的列表项与有前导图标或头像的项正确对齐。

  • Chelsea Otakan
  • Eric Hoffman

没有边距的列表

当在一个定义了边距（gutters）的组件中渲染列表时，可以通过 disableGutters 来禁用 ListItem 的边距。

  • Line item 1
  • Line item 2
  • Line item 3
<List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
  {[1, 2, 3].map((value) => (
    <ListItem
      key={value}
      disableGutters
      secondaryAction={
        <IconButton aria-label="comment">
          <CommentIcon />
        </IconButton>
      }
    >
      <ListItemText primary={`Line item ${value}`} />
    </ListItem>
  ))}
</List>

大型列表渲染

在下面的示例中，我们演示了如何将 react-window 与 List 组件一起使用。 它渲染了 200 多行，并且可以轻松的延展到更多行。 可视化优化了整体的性能。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
<FixedSizeList
  height={400}
  width={360}
  itemSize={46}
  itemCount={200}
  overscanCount={5}
>
  {renderRow}
</FixedSizeList>

我们鼓励尽可能使用 react-window。 如果这个库不包括你的用例，你应该考虑使用 react-virtualized，然后使用 react-virtuoso等替代品。

Customized List

你可以参考以下一些例子来自定义组件。 您可以在 重写文档页面 中了解更多有关此内容的信息。

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

API