アバター

アバターは、アイコン、ラベル、画像を使用して人物を表します。

インポート#


import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';   //Optional for grouping
         

ラベル#

文字アバターは、labelプロパティで定義されます。

ラベル
P
V
U
円
P
V
U
バッジ
U4

<Avatar label="P" size="xlarge" />
<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />

<Avatar label="P" size="xlarge" shape="circle" />
<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />

<Avatar label="U" size="xlarge" className="p-overlay-badge">
<Badge value="4" />
         

アイコン#

フォントアイコンは、iconプロパティを使用してアバターとして表示されます。

アイコン
円
バッジ
4

<Avatar icon="pi pi-user" size="xlarge" />
<Avatar icon="pi pi-user" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
<Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />

<Avatar icon="pi pi-user" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
<Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />

<Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
    <Badge value="4" />
</Avatar>
         

画像#

imageプロパティを使用して、画像をアバターとして表示します。

画像
avatar
avatar
avatar
バッジ
avatar4
Gravatar
avatar

<Avatar image="/images/avatar/amyelsner.png" size="xlarge" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />

<Avatar className="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge">
    <Badge value="4" severity="danger" />
</Avatar>

<Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
         

グループ#

AvatarGroup内に複数のアバターコンポーネントをラップすることで、グループ化が可能です。

avatar
avatar
avatar
avatar
avatar
+2

<AvatarGroup>
  <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
  <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
  <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
  <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
  <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
  <Avatar label="+2" shape="circle" size="large"/>
</AvatarGroup>

         

アクセシビリティ#

スクリーンリーダー

アバターは、デフォルトではロールと属性を含みません。属性はルート要素に渡されるため、コンポーネントを説明するために、imgのようなロールをaria-labelledbyまたはaria-labelとともに追加できます。アバターをタブ移動可能にする必要がある場合は、カスタムキーハンドラを実装するためにtabIndexも追加できます。

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。

              PrimeReact 10.8.3 by PrimeTek