アバター

アバターコンポーネントは、ユーザーを表すために使用され、プロフィール写真、イニシャル、またはフォールバックアイコンを表示します。

インストール

npx nextui-cli@latest add avatar

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

インポート

NextUI は、アバター関連のコンポーネントを3つエクスポートしています。

• Avatar：アバターを表示するためのメインコンポーネント。
• AvatarGroup：アバターのグループを表示するためのラッパーコンポーネント。
• AvatarIcon：画像のロードに失敗した場合のフォールバックとして使用されるデフォルトのアイコン。

使い方

サイズ

無効化

ボーダー

角丸

色

アバターのフォールバック

アバターのsrcのロード中にエラーが発生した場合、2つのフォールバックがあります。

• nameプロパティがある場合、イニシャルとランダムなアクセス可能な背景色を生成するために使用します。
• nameプロパティがない場合は、デフォルトのアバターを使用します。

showFallbackが渡されない場合、フォールバックは表示されません。

カスタムフォールバック

srcのロードに失敗した場合に表示するカスタムフォールバックコンポーネントを提供することもできます。

カスタム実装

アバターをさらにカスタマイズする必要がある場合は、useAvatarフックを使用して、独自の実装を作成できます。

カスタムイニシャルロジック

getInitialsプロパティに関数を渡すことで、イニシャルを生成するために使用するロジックをカスタマイズできます。デフォルトでは、nameプロパティ内の各単語の最初の文字を結合します。

アバターグループ

グループ無効

グループ最大数

maxプロパティをAvatarGroupコンポーネントに渡すことで、表示されるアバターの数を制限できます。

グループ総数

totalプロパティをAvatarGroupコンポーネントに渡すことで、アバターの総数を表示できます。

グループカスタム数

NextUIは、totalプロパティが渡されたときに表示される数をカスタマイズするためのrenderCountプロパティを提供します。

グループグリッド

isGridプロパティをAvatarGroupコンポーネントに渡すことで、アバターがグリッドレイアウトで表示されます。

グループカスタム実装

アバターグループをさらにカスタマイズする必要がある場合は、useAvatarGroupフックとAvatarGroupProviderを使用して独自の実装を作成できます。

スロット

• base: アバターのラッパー。フォーカスリング、位置、および一般的な外観のスタイルが含まれます。
• img: アバター内の画像要素。不透明度遷移とサイズのスタイルが含まれます。
• fallback: 画像の読み込みに失敗した場合、または画像が提供されていない場合のフォールバックコンテンツ。コンテンツを中央に配置するためのスタイルが含まれます。
• name: 画像が提供されていない場合、または読み込みに失敗した場合に表示されるイニシャル。フォント、テキストの配置、および継承のスタイルが含まれます。
• icon: アバター内のアイコン要素。コンテンツの中央配置、テキストの継承、およびサイズのスタイルが含まれます。

カスタムアバタースタイル

classNamesプロパティを使用すると、アバターの任意の部分をカスタマイズできます。各slotには独自のclassNameがあります。

データ属性

Avatarのbase要素には次の属性があります。

• data-hover: アバターがホバーされているとき。 useHover に基づきます。
• data-focus: アバターがフォーカスされているとき。 useFocusRing に基づき、isFocusable が true の場合、または as プロパティに button が割り当てられている場合に適用されます。
• data-focus-visible: キーボードでアバターがフォーカスされているとき。 useFocusRing に基づき、isFocusable が true の場合、または as プロパティに button が割り当てられている場合に適用されます。

API

アバターのプロパティ

アバターグループのプロパティ