バッジ
バッジは、UI要素の小さな数値やステータス記述子として使用されます。
インストール
npx nextui-cli@latest add badge
上記のコマンドは、個別のインストール専用です。もし@nextui-org/reactがグローバルにインストール済みであれば、このステップはスキップできます。@nextui-org/reactがグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
使用方法
サイズ
色
バリアント
配置
形状
より適切な配置のために、バッジの形状を定義するshape プロパティを使用できます。
バッジの表示/非表示
isInvisible プロパティを使用してバッジの表示/非表示を制御できます。
コンテンツの例
アウトラインの無効化
デフォルトでは、バッジにはアウトラインが表示されます。これは、showOutline={false} プロパティを使用することで無効にできます。
アクセシビリティ
バッジの内容を正確なアナウンスに頼るのはお勧めできません。代わりに、aria-label を使用するなど、包括的な説明を提供することを検討してください。
API
バッジのプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children * | ReactNode | ラップされたコンポーネント。 | - |
| content | string | number | ReactNode | バッジの内容。バッジは子要素に対して相対的にレンダリングされます。 | - |
| variant | solid | flat | faded | shadow | バッジのバリアントスタイル。 | solid |
| color | default | primary | secondary | success | warning | danger | バッジの色。 | default |
| size | sm | md | lg | バッジのサイズ。 | md |
| shape | circle | rectangle | バッジの形状。 | rectangle |
| placement | top-right | top-left | bottom-right | bottom-left | バッジの配置。 | top-right |
| showOutline | boolean | trueの場合、バッジにはアウトラインが表示されます。 | true |
| disableOutline | boolean | trueの場合、バッジにはアウトラインが表示されません。非推奨 showOutline を代わりに使用してください。 | false |
| disableAnimation | boolean | trueの場合、バッジにはアニメーションが表示されません。 | false |
| isInvisible | boolean | trueの場合、バッジは非表示になります。 | false |
| isOneChar | boolean | trueの場合、バッジの幅と高さが同じになります。 | false |
| isDot | boolean | trueの場合、バッジの寸法が小さくなります。 | false |
| classNames | Record<"base"｜"badge", string> | バッジのスロットにカスタムクラス名をセットできます。 | - |
