スピナー
スピナーは、不明確な待ち時間を示したり、プロセスの長さを表示したりします。
インストール
npx nextui-cli@latest add spinner
上記のコマンドは個別のインストール専用です。もし @nextui-org/react がグローバルにインストールされている場合は、このステップをスキップできます。
インポート
使用方法
注意: Spinnerは、デフォルトで
Loadingをaria-labelとして追加します。これはアクセシビリティのために必須です。labelまたはaria-labelpropを渡すことで変更できます。
サイズ
色
ラベル付き
ラベルの色
スロット
- base: スピナーのベーススロットで、円とラベルをラップします。
- wrapper: 円のラッパーです。
- circle1: スピナーの1つ目の円です。
- circle2: スピナーの2つ目の円です。
- label: ラベルの内容です。
API
円形プログレスプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| label | string | ラベルとして表示するコンテンツ。 | - |
| size | sm | md | lg | スピナーの円のサイズ。 | md |
| color | default | primary | secondary | success | warning | danger | スピナーの円の色。 | primary |
| labelColor | default | primary | secondary | success | warning | danger | ラベルの色。 | default |
| classNames | Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string> | スピナーのスロットにカスタムクラス名をセットできます。 | - |
