ユーザー
アバターと名前でユーザー情報を表示します。
インストール
npx nextui-cli@latest add user
上記のコマンドは個別のインストール専用です。もし、 @nextui-org/reactがグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
使い方
注記:
avatarPropsの詳細については、Avatarコンポーネントを参照してください。
リンクの説明
スロット
- base: ユーザーのベーススロットで、メインコンテナです。
- wrapper: 名前と説明のラッパー。
- name: ユーザーの名前。
- description: ユーザーの説明。
データ属性
Userは、isFocusableがtrueの場合にのみ、root要素に以下の属性を持ちます。
- data-focus: ユーザーがフォーカスされているとき。 useFocusRingに基づいています。
- data-focus-visible: ユーザーがキーボードでフォーカスされているとき。 useFocusRingに基づいています。
API
ユーザープロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| name | string | ユーザーの名前。 | - |
| description | ReactNode | 説明コンポーネント。 | - |
| isFocusable | boolean | ユーザーがフォーカス可能かどうか。これは、Dropdownなどのコンポーネントを使用する場合に便利です。 | false |
| avatarProps | AvatarProps | アバターコンポーネントのプロパティ。 nameはデフォルトで渡されます。 | - |
| classNames | Record<"base"｜ "wrapper"｜ "name"｜ "description", string> | ユーザースロットにカスタムクラス名をセットできます。 | - |
