Avatar 头像

使用 avatar 组件，使用基于多种样式和大小的 image 元素或 SVG 对象来显示用户个人资料的可视化表示形式

头像组件可用作您网站上用户配置文件的视觉标识符，您可以使用 SatriUI 中的示例，通过 Tailwind CSS 中的实用程序类修改这些组件的样式和大小。

默认头像

使用此示例在 image 元素上创建圆形和圆形头像。

源代码预览

<img class="w-10 h-10 rounded-full" src="https://satri.cn/1.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="Default avatar">

带边框

在头像组件周围应用边框，您可以使用 Tailwind CSS 中的类。ring-{color}

源代码预览

<img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https://satri.cn/1.jpg" alt="Bordered avatar">

图标占位

当没有可用的自定义图像时，使用此示例作为用户配置文件的占位符图标。

源代码预览

<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
    <svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>

首字符占位

源代码预览

<div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
    <span class="font-medium text-gray-600 dark:text-gray-300">夏</span>
</div>

头像 点击/悬停 提示

源代码预览

<div>
  <div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
      第一个头像
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-jese" class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="Medium avatar">
</div>
<div>
  <div id="tooltip-roberta" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
      第二个头像
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-roberta" class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="Medium avatar">
</div>
<div>
  <div id="tooltip-bonnie" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
      第三个头像
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-bonnie" class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="Medium avatar">
</div>

头像指示点

使用相对于 avatar 组件的点元素作为用户的指示器（例如，在线或离线状态）。

源代码预览

<div class="relative">
    <img class="w-10 h-10 rounded-full" src="https://satri.cn/1.jpg" alt="">
    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="">
    <span class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-red-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded-full" src="https://satri.cn/1.jpg" alt="">
    <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="">
    <span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>

堆叠

如果要通过重叠 avatar 组件来堆叠一组用户，请使用此示例。

源代码预览

<div class="flex -space-x-4 rtl:space-x-reverse">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
</div>
<div class="flex -space-x-4 rtl:space-x-reverse">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://satri.cn/1.jpg" alt="">
    <a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800" href="#">+99</a>
</div>

头像文本

如果要以文本元素的形式显示其他信息，如用户名和加入日期，则可以使用此示例。

源代码预览

<div class="flex items-center gap-4">
    <img class="w-10 h-10 rounded-full" src="https://satri.cn/1.jpg" alt="">
    <div class="font-medium dark:text-white">
        <div>夏创科技</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">2021年6月加入</div>
    </div>
</div>

用户下拉列表

如果要在单击 avatar 组件时显示下拉菜单，请使用此示例。

源代码预览

<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer" src="https://satri.cn/1.jpg" alt="User dropdown">
<div id="userDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
    <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
      <div>夏创科技</div>
      <div class="font-medium truncate">boss@satri.cn</div>
    </div>
    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="avatarButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">仪表盘</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">设置</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">账户</a>
      </li>
    </ul>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">退出登录</a>
    </div>
</div>

大小

从此示例中 avatar 组件的多个大小调整选项中进行选择。

源代码预览

<img class="w-6 h-6 rounded" src="https://satri.cn/1.jpg" alt="Extra small avatar">
<img class="w-8 h-8 rounded" src="https://satri.cn/1.jpg" alt="Small avatar">
<img class="w-10 h-10 rounded" src="https://satri.cn/1.jpg" alt="Medium avatar">
<img class="w-20 h-20 rounded" src="https://satri.cn/1.jpg" alt="Large avatar">
<img class="rounded w-36 h-36" src="https://satri.cn/1.jpg" alt="Extra large avatar">