跳到主要內容跳到主要內容
🚀 影響 Joy UI 2025 年的開發藍圖！參與最新的開發者調查

線性進度條API

React LinearProgress 組件的 API 參考文檔。了解此導出模組的屬性、CSS 和其他 API。

示範

導入

import LinearProgress from '@mui/joy/LinearProgress';
// or
import { LinearProgress } from '@mui/joy';

閱讀此關於最小化 bundle 大小的指南，以了解差異。



ARIA

如果進度條描述頁面特定區域的載入進度，您應該使用 aria-describedby 指向進度條，並在該區域完成載入之前，將 aria-busy 屬性設定為 true。

屬性

也提供原生組件的屬性。

名稱類型預設描述
顏色'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| 字串		'primary'

組件的顏色。它支援適用於此組件的主題顏色。

若要了解如何新增您自己的顏色，請查看主題組件 — 擴展顏色。

組件元素類型-

用於根節點的組件。可以是字串（用於 HTML 元素）或組件。

確定性布林值false

選擇變體的布林值。當沒有進度值時，請使用不確定性。

尺寸'sm'
| 'md'
| 'lg'
| 字串		'md'

組件的尺寸。它接受 'sm' 和 'lg' 之間的主題值。

若要了解如何為組件新增自訂尺寸，請查看主題組件 — 擴展尺寸。

插槽屬性{ root?: func
| object }		{}

用於每個插槽內部的屬性。

插槽{ root?: elementType }{}

用於每個插槽內部的組件。

有關更多詳細資訊，請參閱下方的插槽 API。

sxArray<func
| object
| bool>
| func
| object		-

允許定義系統覆寫以及額外 CSS 樣式的系統屬性。

有關更多詳細資訊，請參閱 `sx` 頁面。

厚度數字-

長條的厚度。

值數字determinate ? 0 : 25

確定性變體的進度指示器值。值介於 0 到 100 之間。

變體'outlined'
| 'plain'
| 'soft'
| 'solid'
| 字串		'soft'

要使用的全域變體。

若要了解如何新增您自己的變體，請查看主題組件 — 擴展變體。

ref 會轉發到根元素。

主題預設屬性

您可以使用 JoyLinearProgress 透過主題變更此組件的預設屬性。

插槽

若要了解如何自訂插槽，請查看覆寫組件結構指南。

插槽名稱類別名稱預設組件描述
根.MuiLinearProgress-root'div'渲染根的組件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至組件的插槽。

類別名稱規則名稱描述
.MuiLinearProgress-colorContextcolorContext當觸發顏色反轉時，套用至根元素的類別名稱。
.MuiLinearProgress-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiLinearProgress-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiLinearProgress-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiLinearProgress-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiLinearProgress-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiLinearProgress-determinate確定性如果 determinate 為 true，則套用至根元素的類別名稱。
.MuiLinearProgress-sizeLgsizeLg如果 size="lg"，則套用至根元素的類別名稱。
.MuiLinearProgress-sizeMdsizeMd如果 size="md"，則套用至根元素的類別名稱。
.MuiLinearProgress-sizeSmsizeSm如果 size="sm"，則套用至根元素的類別名稱。
.MuiLinearProgress-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的類別名稱。
.MuiLinearProgress-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的類別名稱。
.MuiLinearProgress-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的類別名稱。
.MuiLinearProgress-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的類別名稱。

您可以使用以下其中一種自訂選項來覆寫組件的樣式

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。