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" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" />
</AvatarGroup>
可访问性 #
屏幕阅读器
默认情况下，头像不包含任何角色和属性。任何属性都传递给根元素，因此您可以添加角色（如 img）以及 aria-labelledby 或 aria-label 来描述组件。如果头像需要可聚焦，也可以添加 tabindex 来实现自定义按键处理程序。
键盘支持
组件不包含任何交互式元素。