進度 (Progress)

進度組件允許您檢視任何活動的進度。

安裝

上述命令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

匯入

用法

注意：請確保在未提供 label 屬性的情況下傳遞 aria-label 屬性。這是為了無障礙存取的需求。

尺寸

顏色

不確定 (Indeterminate)

您可以使用 isIndeterminate 屬性來顯示不確定的進度條。當您不知道操作需要多長時間時，這非常有用。

條紋樣式

帶標籤

注意：如果您傳遞 label 屬性，則不再需要傳遞 aria-label 屬性。

帶數值

數值格式化

數值預設會格式化為百分比，但可以使用 formatOptions 屬性來指定不同的格式。formatOptions 與 Intl.NumberFormat 的選項參數相容，並根據目前的語言環境應用。

插槽

• base：進度條的基本插槽，它是主要容器。
• labelWrapper：標籤和數值標籤的包裝器。
• label：進度條的標籤。
• value：進度條的數值標籤。
• track：軌道是進度條的背景條。
• indicator：指示器是根據 value 填充的條。

自訂樣式

您可以通過將自訂 Tailwind CSS 類別傳遞給元件插槽來自訂 Progress 元件。

資料屬性

CircularProgress 在 base 元素上具有以下屬性

• data-indeterminate：指示進度是否不確定。
• data-disabled：指示進度是否已停用。基於 isDisabled 屬性。

無障礙性

• 透過 ARIA 作為進度條公開給輔助技術。
• 支援無障礙標籤。
• 國際化的數字格式化，可以是百分比或數值。
• 支援確定和不確定的進度。
• 公開 aria-valuenow、aria-valuemin、aria-valuemax 和 aria-valuetext 屬性。

API

進度條屬性