跳转到内容
编辑此页面

List 列表

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

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

简易列表

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

function ListItemLink(props) {
  return <ListItem button component="a" {...props} />;
}

//...

<ListItemLink href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemLink>;

你可以从这里查看 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

可选的列表子项

对齐列表项

若想显示 3 行或者更多行时，你应该改变列表项的对齐方式，将 alignItems 属性值设置为 "flex-start"。

  • 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

固定的副标题列表

在滚动列表时，子标题保持固定在屏幕的顶端，直到被下一个子标题推离屏幕。

此性能由 CSS sticky 位置实现。 可惜的是，这一功能并未在我们支持的所有浏览器中 实现 。 若浏览器不支持，则默认使用 disableSticky。

    • 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）图标或头像的列表项与有前导图标或头像的项正确对齐。

<List
  sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
  component="nav"
  aria-label="contacts"
>
  <ListItem button>
    <ListItemIcon>
      <StarIcon />
    </ListItemIcon>
    <ListItemText primary="Chelsea Otakan" />
  </ListItem>
  <ListItem button>
    <ListItemText inset primary="Eric Hoffman" />
  </ListItem>
</List>

没有边距的列表

当在一个定义了边距（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>
      <ListItemText primary={`Line item ${value}`} />
      <ListItemSecondaryAction>
        <IconButton>
          <CommentIcon />
        </IconButton>
      </ListItemSecondaryAction>
    </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等替代品。

Customization 个性化

🎨 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

API