列表

列表是文字或圖片的連續垂直索引。

列表是文字或圖片的連續群組。它們由包含主要和補充動作的項目組成，這些動作由圖示和文字表示。

簡介

列表透過文字或圖片的連續垂直索引，以簡潔、易於追蹤的格式呈現資訊。

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 黏性定位。

內縮列表項目

inset 屬性啟用沒有前導圖示或頭像的列表項目，使其與有前導圖示或頭像的項目正確對齊。

無間距列表

當在定義自己間距的元件中渲染列表時，可以使用 disableGutters 停用 ListItem 間距。

虛擬化列表

在以下範例中，我們示範如何將 react-window 與 List 元件搭配使用。它渲染 200 列，並且可以輕鬆處理更多列。虛擬化有助於解決效能問題。

建議盡可能使用 react-window。如果這個程式庫不符合您的使用案例，您應該考慮使用其他替代方案，例如 react-virtuoso。

自訂

以下是一些自訂元件的範例。您可以在覆寫文件頁面中瞭解更多相關資訊。

API

請參閱以下文件，以取得此處提及之元件的所有屬性和類別的完整參考。

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