Avatar
アバターは、アイコン、ラベル、画像を使用して人を表現します。
インポート #
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup'; //Optional for grouping
ラベル #
文字アバターは、labelプロパティで定義されます。
ラベル
P
V
U
円
P
V
U
Badge
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
アイコン #
フォントアイコンは、iconプロパティを持つアバターとして表示されます。
アイコン
円
Badge
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
Image #
imageプロパティを使用して、画像をアバターとして表示します。
Image
Badge
Gravatar
<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
AvatarGroup #
グループ化は、複数のアバターコンポーネントをAvatarGroup内にラップすることで利用できます。
+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も追加できます。
キーボードサポート
コンポーネントにはインタラクティブな要素は含まれていません。