環形進度條

環形進度指示器用於表示不確定的等待時間，或以視覺方式呈現一個過程的持續時間。

安裝

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

導入

用法

注意：當未提供 label 屬性時，請務必傳遞 aria-label 屬性。這是為了方便存取。

尺寸

顏色

帶標籤

帶值

數值格式化

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

插槽

• base：圓形進度條的基本插槽，它是主要容器。
• svgWrapper：svg 圓圈和數值標籤的外層容器。
• svg：圓圈的 svg 元素。
• track：軌跡是環形進度條的背景圓圈。
• indicator：指示器會根據 value 的值來填充。
• value：數值內容。
• label：標籤內容。

自訂樣式

您可以透過將自訂 Tailwind CSS 類別傳遞到元件的插槽來自訂 CircularProgress 元件。

資料屬性

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

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

無障礙功能

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

API

環形進度條屬性