Skip to main content

Avatar

用于展示头像的组件。

基本用法​

通过 image 属性传入头像地址，链接失效会显示默认用户图标：

function App() {
  return (
    <div className="ykui-demo-row">
      <Avatar image="https://picsum.photos/180/120" />
      <Avatar image="https://picsum123.photos/180/120" />
      <Avatar />
    </div>
  )
}

自定义头像内容​

通过 children 子节点自定义内容：

function App() {
  return (
    <Avatar>L</Avatar>
  )
}

自定义头像大小​

通过 size 属性控制大小：

function App() {
  return (
    <div className="ykui-demo-row">
      <Avatar size={24}>L</Avatar>
      <Avatar size={32}>L</Avatar>
      <Avatar size={40}>L</Avatar>
    </div>
  )
}

自定义头像形状​

通过 shape 属性控制形状：

function App() {
  return (
    <div className="ykui-demo-row">
      <Avatar shape="circle">L</Avatar>
      <Avatar shape="round">L</Avatar>
    </div>
  )
}

自定义头像底色​

通过 color 属性控制底色：

function App() {
  return (
    <div className="ykui-demo-row">
      <Avatar color="#BCE0A4">L</Avatar>
      <Avatar color="#F0B9B7">L</Avatar>
    </div>
  )
}

组合头像​

通过 Avatar.Group 包裹组合头像：

function App() {
  return (
    <Avatar.Group>
      <Avatar>L</Avatar>
      <Avatar>P</Avatar>
      <Avatar>L</Avatar>
    </Avatar.Group>
  )
}

组合折叠方向​

通过 cascading 控制组合头像折叠方向：

function App() {
  return (
    <div className="ykui-demo-column">
      <Avatar.Group cascading="right">
        <Avatar>L</Avatar>
        <Avatar>P</Avatar>
        <Avatar>L</Avatar>
      </Avatar.Group>
      <Avatar.Group cascading="left">
        <Avatar>L</Avatar>
        <Avatar>P</Avatar>
        <Avatar>L</Avatar>
      </Avatar.Group>
    </div>
  )
}

组合头像透传​

Avatar.Group 可透传 Avatar 属性，优先级低于单个 Avatar：

function App() {
  return (
    <div className="ykui-demo-column">
      <Avatar.Group
        size={40}
        shape="round"
        color="#5698F6"
      >
        <Avatar>L</Avatar>
        <Avatar>P</Avatar>
        <Avatar>L</Avatar>
      </Avatar.Group>
      <Avatar.Group
        size={40}
        shape="round"
        color="#5598F6"
      >
        <Avatar size={32}>L</Avatar>
        <Avatar shape="circle">C</Avatar>
        <Avatar color="#F5B9B6">K</Avatar>
      </Avatar.Group>
    </div>
  )
}

Avatar API​

属性说明类型默认值
children头像ReactNode--
className头像类名string--
style头像样式CSSProperties--
size头像大小number32
image头像地址string--
shape头像形状circle〡roundcircle
color头像底色string#c1c4cb

AvatarGroup API​

属性说明类型默认值
children头像ReactNode--
className组合头像类名string--
style组合头像样式CSSProperties--
size全局头像大小number32
shape全局头像形状circle〡roundcircle
color全局头像底色string#c1c4cb
cascading组合折叠方向left〡rightright
gap组合头像间距number0