チップ
チップは、入力、属性、またはアクションを表す、重要な情報の小さなブロックです。
インストール
npx nextui-cli@latest add chip
上記のコマンドは個別のインストール専用です。もし @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
使い方
無効化
サイズ
色
角丸
種類
開始/終了コンテンツ
閉じるボタン付き
onClose prop を渡すと、閉じるボタンが表示されます。 endContent prop を渡すことで、閉じるアイコンを上書きできます。
アバター付き
チップのリスト
スロット
- base: チップのベーススロットで、チップのコンテナです。
- content: チップのコンテンツスロットで、チップの子要素のコンテナです。
- dot: チップの左側にある小さなドット。
variant=dotprop が渡されたときに表示されます。 - avatar: チップのアバタークラス。
avatarprop が渡されたときに表示されます。 - closeButton: チップの閉じるボタンのクラス。
onCloseprop が渡されたときに表示されます。
カスタムスタイル
コンポーネントスロットにカスタムのTailwind CSSクラスを渡すことで、Chip コンポーネントをカスタマイズできます。
API
Chip Props
| 属性 | タイプ | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | チップの内容。 | - |
| variant | solid | bordered | light | flat | faded | shadow | dot | チップの外観スタイル。 | solid |
| color | default | primary | secondary | success | warning | danger | チップの色。 | default |
| size | sm | md | lg | チップのサイズ。 | md |
| radius | none | sm | md | lg | full | チップの半径。 | full |
| avatar | ReactNode | チップの左側にレンダリングされるアバター。 | - |
| startContent | ReactNode | チップの左側にレンダリングされる要素。このプロパティは、avatarプロパティをオーバーライドします。 | - |
| endContent | ReactNode | チップの右側にレンダリングされる要素。このプロパティは、onCloseが渡された場合のデフォルトのクローズボタンをオーバーライドします。 | - |
| isDisabled | boolean | チップが無効かどうか。 | false |
| classNames | Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string> | チップスロットにカスタムクラス名をセットできます。 | - |
Chip Events
| 属性 | タイプ | 説明 |
|---|---|---|
| onClose | (e: PressEvent) => void | クローズボタンが押されたときに呼び出されるハンドラー。このプロパティを渡すと、チップにクローズボタン（endContent）が表示されます。 |
