头像

头像使用图标、标签和图像来表示人物。

导入#


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

标签#

字母头像通过label属性定义。

圆形

徽章


<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属性，字体图标显示为头像。

图标

圆形

徽章


<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属性将图像显示为头像。

图片

徽章

Gravatar


<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 中来实现分组。


<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 来实现自定义键处理程序。

键盘支持

组件不包含任何交互元素。