ListDividerAPI
React ListDivider 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
Demos
Import
import ListDivider from '@mui/joy/ListDivider';
// or
import { ListDivider } from '@mui/joy';閱讀這份關於最小化 bundle 大小的指南，以瞭解它們之間的差異。
原生元件的 Props 也可使用。
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | 元件的內容。 |
| component | elementType | - | 用於根節點的元件。 可以是字串 (使用 HTML 元素) 或元件。 |
| inset | 'context' | 'gutter' | 'startDecorator' | 'startContent' | string | 'context' | 垂直清單中分隔線側邊的空白間距。 |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | 元件方向。 |
| slotProps | { root?: func | object } | {} | 用於每個內部 slot 的 props。 |
| slots | { root?: elementType } | {} | 用於每個內部 slot 的元件。 請參閱下方Slots API 以瞭解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統屬性。 請參閱 `sx` 頁面 以瞭解更多詳細資訊。 |
ref 會轉發到根元素。主題預設 props
您可以使用 JoyListDivider 透過主題變更此元件的預設 props。
若要瞭解如何自訂 slot，請查看覆寫元件結構指南。
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .MuiListDivider-root | 'li' | 呈現 root 的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。 它們會在觸發特定狀態時套用至元件的 slots。
| Class name | Rule name | Description |
|---|---|---|
| .MuiListDivider-horizontal | horizontal | 如果 orientation="horizontal"，則套用至根元素的類別名稱。 |
| .MuiListDivider-insetGutter | insetGutter | 如果 inset="gutter"，則套用至根元素的類別名稱。 |
| .MuiListDivider-insetStartContent | insetStartContent | 如果 inset="startContent"，則套用至根元素的類別名稱。 |
| .MuiListDivider-insetStartDecorator | insetStartDecorator | 如果 inset="startDecorator"，則套用至根元素的類別名稱。 |
| .MuiListDivider-vertical | vertical | 如果 orientation="vertical"，則套用至根元素的類別名稱。 |
您可以使用下列自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為元件
styleOverrides屬性的一部分。
Source code
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。