進捗

Progress コンポーネントを使用すると、任意のアクティビティの進捗状況を表示できます。

インストール

npx nextui-cli@latest add progress

上記のコマンドは、個別のインストール専用です。もし、 @nextui-org/react がグローバルに既にインストールされている場合は、このステップをスキップしても構いません。

インポート

使用方法

注意: label プロパティが提供されていない場合は、aria-label プロパティを渡すようにしてください。これはアクセシビリティのために必須です。

サイズ

色

未確定

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

Progress Props