🎉 daisyUI 5.0 升级指南

头像

头像用于在界面中显示个人或企业的缩略图表示。

类名		类型
avatar
组件
头像
avatar-group
组件
多个头像的容器
avatar-online
修饰符
显示绿点作为在线指示器
avatar-offline
修饰符
显示灰点作为离线指示器
avatar-placeholder
修饰符
显示字母作为头像占位符

头像

Tailwind-CSS-Avatar-component
<div class="$$avatar">
  <div class="w-24 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

自定义尺寸的头像

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
<div class="$$avatar">
  <div class="w-32 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-20 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-16 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-8 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-32 rounded">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-20 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-16 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-8 rounded">
    <img
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
      alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

圆角头像

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
<div class="$$avatar">
  <div class="w-24 rounded-xl">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-xl">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

带蒙版的头像

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
<div class="$$avatar">
  <div class="$$mask $$mask-squircle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-hexagon w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-triangle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-squircle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-hexagon w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-triangle w-24">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

头像组

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
</div>
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
</div>

带计数器的头像组

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
+99
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar $$avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-12">
      <span>+99</span>
    </div>
  </div>
</div>
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
    </div>
  </div>
  <div class="$$avatar $$avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-12">
      <span>+99</span>
    </div>
  </div>
</div>

带环的头像

Tailwind-CSS-Avatar-component
<div class="$$avatar">
  <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar">
  <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

带状态指示器的头像

Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
<div class="$$avatar $$avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar $$avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar $$avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar $$avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

头像占位符

D
AI
SY
UI
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-24 rounded-full">
    <span class="text-3xl">D</span>
  </div>
</div>
<div class="$$avatar $$avatar-online $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-16 rounded-full">
    <span class="text-xl">AI</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-12 rounded-full">
    <span>SY</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-8 rounded-full">
    <span class="text-xs">UI</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-24 rounded-full">
    <span class="text-3xl">D</span>
  </div>
</div>
<div class="$$avatar $$avatar-online $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-16 rounded-full">
    <span class="text-xl">AI</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-12 rounded-full">
    <span>SY</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-8 rounded-full">
    <span class="text-xs">UI</span>
  </div>
</div>
你发现 bug 了吗? 在 GitHub 上提交 issue
你喜欢 daisyUI 吗? 发帖宣传一下吧！
支持 daisyUI 的开发: Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表盘模板

在 daisyUI 商店中可用

更多详情
请升级您的浏览器