円形プログレス

円形プログレスインジケーターは、未確定の待機期間を示すため、またはプロセスの期間を視覚的に表現するために利用されます。

インストール

npx nextui-cli@latest add progress

上記のコマンドは個別のインストール専用です。もし、 @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

円形プログレスのプロパティ