CircularProgressAPI
React CircularProgress 組件的 API 參考文件。了解這個匯出模組的 props、CSS 和其他 API。
範例
匯入
import CircularProgress from '@mui/joy/CircularProgress';
// or
import { CircularProgress } from '@mui/joy';透過閱讀這份關於最小化 bundle size 的指南，了解差異。
ARIA
如果進度條描述頁面特定區域的載入進度，您應該使用 aria-describedby 指向進度條，並將該區域的 aria-busy 屬性設定為 true，直到載入完成。
原生組件的 Props 也可用。
| 名稱 | 類型 | 預設 | 描述 |
|---|---|---|---|
| color | 'danger' | 'neutral' | 'primary' | 'success' | 'warning' | string | 'primary' | 組件的顏色。它支援適用於此組件的 theme 顏色。 若要了解如何新增自己的顏色，請查看主題組件—擴充顏色。 |
| component | elementType | - | 用於 root node 的組件。可以是字串以使用 HTML 元素或組件。 |
| determinate | 布林值 | false | 選擇 variant 的布林值。當沒有進度值時，請使用 indeterminate。 |
| size | 'sm' | 'md' | 'lg' | string | 'md' | 組件的大小。它接受 'sm' 和 'lg' 之間的 theme 值。 若要了解如何為組件新增自訂大小，請查看主題組件—擴充大小。 |
| slotProps | { progress?: func | object, root?: func | object, svg?: func | object, track?: func | object } | {} | 用於每個 slot 內部的 props。 |
| slots | { progress?: elementType, root?: elementType, svg?: elementType, track?: elementType } | {} | 用於每個 slot 內部的組件。 請參閱下方的Slots API以取得更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及額外 CSS 樣式的系統 prop。 請參閱 `sx` 頁面以取得更多詳細資訊。 |
| thickness | 數字 | - | 圓的粗細。 |
| value | 數字 | determinate ? 0 : 25 | determinate variant 的進度指示器值。值介於 0 到 100 之間。 |
| variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | 'soft' | 要使用的 global variant。 若要了解如何新增自己的 variant，請查看主題組件—擴充 variant。 |
ref 會轉發到 root 元素。主題預設 props
您可以使用 JoyCircularProgress 透過主題變更此組件的預設 props。
若要了解如何自訂 slot，請查看覆寫組件結構指南。
| Slot 名稱 | 類別名稱 | 預設組件 | 描述 |
|---|---|---|---|
| root | .MuiCircularProgress-root | 'span' | 呈現 root 的組件。 |
| svg | .MuiCircularProgress-svg | 'svg' | 呈現 svg 的組件。 |
| track | .MuiCircularProgress-track | 'circle' | 呈現 track 的組件。 |
| progress | .MuiCircularProgress-progress | 'circle' | 呈現 progress 的組件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至組件的 slot。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiCircularProgress-colorContext | colorContext | 當觸發顏色反轉時，套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-colorDanger | colorDanger | 如果 color="danger"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-colorNeutral | colorNeutral | 如果 color="neutral"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-colorPrimary | colorPrimary | 如果 color="primary"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-colorSuccess | colorSuccess | 如果 color="success"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-colorWarning | colorWarning | 如果 color="warning"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-determinate | determinate | 如果 determinate 為 true，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-sizeLg | sizeLg | 如果 size="lg"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-sizeMd | sizeMd | 如果 size="md"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-sizeSm | sizeSm | 如果 size="sm"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-variantOutlined | variantOutlined | 如果 variant="outlined"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-variantPlain | variantPlain | 如果 variant="plain"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-variantSoft | variantSoft | 如果 variant="soft"，則套用至 root 元素的類別名稱。 |
| .MuiCircularProgress-variantSolid | variantSolid | 如果 variant="solid"，則套用至 root 元素的類別名稱。 |
您可以使用以下其中一種客製化選項覆寫組件的樣式
- 使用global 類別名稱。
- 在自訂主題中使用規則名稱作為組件的
styleOverrides屬性的一部分。
原始碼
如果您在本頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。