头像

形状

默认

演示

代码

HTML

代码

JSX/TSX

<div class="avatar">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

方形

演示

代码

HTML

代码

JSX/TSX

<div class="avatar square">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar square'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

带有外环

演示

代码

HTML

代码

JSX/TSX

<div class="avatar ring success">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar ring success'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

尺寸

演示

代码

HTML

代码

JSX/TSX

<div class="flex gap-4">
	<div class="avatar xs">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar sm">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar md">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar lg">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar xl">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
</div>

<div className='flex gap-4'>
  <div className='avatar xs'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar sm'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar md'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar lg'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar xl'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
</div>

文本

演示

代码

HTML

代码

JSX/TSX

<div class="avatar success">
	<div>RV</div>
</div>

<div className='avatar success'>
  <div>
    RV
  </div>
</div>

头像组

演示

代码

HTML

代码

JSX/TSX

<div class="avatar-group">
	<div class="avatar">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar success">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar warn">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar danger">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
</div>

<div className='avatar-group'>
  <div className='avatar'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar success'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar warn'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar danger'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
</div>

类名表

类名	描述
avatar	用于头像 img 的包装
square	设置方形（默认为圆形）
ring	设置外环样式
avatar-group	用于头像组的包装
xs	设置超小尺寸
sm	设置较小尺寸
md	设置中等尺寸
lg	设置较大尺寸
xl	设置超大尺寸

手风琴徽章