🎉 daisyUI 5.0 升级指南

指示器

指示器用于将元素放置在另一个元素的角落。

类名		类型
indicator
组件
容器元素
indicator-item
部分
将被放置在兄弟元素的角落
indicator-start
放置
水平对齐到起始位置
indicator-center
放置
水平对齐到中心位置
indicator-end
放置
水平对齐到结束位置[默认]
indicator-top
放置
垂直对齐到顶部[默认]
indicator-middle
放置
垂直对齐到中间
indicator-bottom
放置
垂直对齐到底部

状态指示器

内容
<div class="$$indicator">
  <span class="$$indicator-item $$status $$status-success"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$status $$status-success"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

徽章作为指示器

New
内容
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-primary">New</span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-primary">New</span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

用于按钮

12 
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">12</span>
  <button class="$$btn">inbox</button>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">12</span>
  <button class="$$btn">inbox</button>
</div>

用于标签页

<div class="$$tabs $$tabs-lift">
  <a class="$$tab">Messages</a>
  <a class="$$indicator $$tab $$tab-active">
    Notifications
    <span class="$$indicator-item $$badge">8</span>
  </a>
  <a class="$$tab">Requests</a>
</div>
<div class="$$tabs $$tabs-lift">
  <a class="$$tab">Messages</a>
  <a class="$$indicator $$tab $$tab-active">
    Notifications
    <span class="$$indicator-item $$badge">8</span>
  </a>
  <a class="$$tab">Requests</a>
</div>

用于头像

在线
Tailwind CSS examples
<div class="$$avatar $$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">Online</span>
  <div class="h-20 w-20 rounded-lg">
    <img
      alt="Tailwind CSS examples"
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar $$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">Online</span>
  <div class="h-20 w-20 rounded-lg">
    <img
      alt="Tailwind CSS examples"
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

用于输入框

必填 
<div class="$$indicator">
  <span class="$$indicator-item $$badge">Required</span>
  <input type="text" placeholder="Your email address" class="$$input $$input-bordered" />
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge">Required</span>
  <input type="text" placeholder="Your email address" class="$$input $$input-bordered" />
</div>

一个按钮作为卡片的指示器

职位名称

Rerum reiciendis beatae tenetur excepturi

<div class="$$indicator">
  <div class="$$indicator-item $$indicator-bottom">
    <button class="$$btn $$btn-primary">Apply</button>
  </div>
  <div class="$$card border border-base-300 shadow-sm">
    <div class="$$card-body">
      <h2 class="$$card-title">Job Title</h2>
      <p>Rerum reiciendis beatae tenetur excepturi</p>
    </div>
  </div>
</div>
<div class="$$indicator">
  <div class="$$indicator-item $$indicator-bottom">
    <button class="$$btn $$btn-primary">Apply</button>
  </div>
  <div class="$$card border border-base-300 shadow-sm">
    <div class="$$card-body">
      <h2 class="$$card-title">Job Title</h2>
      <p>Rerum reiciendis beatae tenetur excepturi</p>
    </div>
  </div>
</div>

在图像中心

仅 Pro 用户可用 Tailwind CSS 示例
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$indicator-middle">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" />
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$indicator-middle">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" />
</div>

indicator-top (默认) indicator-start

内容
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-top (默认) indicator-center

内容
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-top (默认) indicator-end (默认)

内容
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-start

内容
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-center

内容
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-end (默认)

内容
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-middle $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-middle $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-start

内容
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-center

内容
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-end (默认)

内容
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-bottom $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-bottom $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

多个指示器

↖︎ ↑ ↗︎ ← ● → ↙︎ ↓ ↘︎
盒子
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-top $$indicator-start $$badge">↖︎</span>
  <span class="$$indicator-item $$indicator-top $$indicator-center $$badge">↑</span>
  <span class="$$indicator-item $$indicator-top $$indicator-end $$badge">↗︎</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-start $$badge">←</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-center $$badge">●</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-end $$badge">→</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-start $$badge">↙︎</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-center $$badge">↓</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-end $$badge">↘︎</span>
  <div class="bg-base-300 grid h-32 w-60 place-items-center">Box</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-top $$indicator-start $$badge">↖︎</span>
  <span class="$$indicator-item $$indicator-top $$indicator-center $$badge">↑</span>
  <span class="$$indicator-item $$indicator-top $$indicator-end $$badge">↗︎</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-start $$badge">←</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-center $$badge">●</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-end $$badge">→</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-start $$badge">↙︎</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-center $$badge">↓</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-end $$badge">↘︎</span>
  <div class="bg-base-300 grid h-32 w-60 place-items-center">Box</div>
</div>

响应式

根据分辨率更改位置
内容
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
您发现错误了吗？ 在 GitHub 上打开 issue
您喜欢 daisyUI 吗？ 发帖宣传一下！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
官方 daisyUI 仪表盘模板

在 daisyUI 商店提供

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