纯 CSS Tailwind CSS 指示器，用于在任何元素角上叠加徽章或点。颜色变体和定位。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
指示器组件显示位于其他元素上的状态、徽章或通知。指示器采用绝对定位和灵活的样式构建，可覆盖卡片、头像和按钮上的重要信息。 Frutjam 指示器系统支持多种位置、尺寸和颜色，非常适合通知徽章、状态标记和视觉提示。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| indicator | 根据 | Relative-positioned wrapper for the indicator item |
| indicator-item | 修饰符 | Absolutely positioned badge or dot element |
| indicator-top | 修饰符 | Positions item at the top edge |
| indicator-middle | 修饰符 | Positions item at the vertical middle |
| indicator-bottom | 修饰符 | Positions item at the bottom edge |
| indicator-start | 修饰符 | Positions item at the left edge |
| indicator-center | 修饰符 | Positions item at the horizontal center |
| indicator-end | 修饰符 | Positions item at the right edge |
基本用法
99+
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-primary">99+</span> <button class="btn">Messages</button> </div> |
1 2 3 4 | <div className="indicator"> <span className="indicator-item badge badge-primary">99+</span> <button className="btn">Messages</button> </div> |
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-primary">99+</span> <button class="btn">Messages</button> </div> |
Indicator Placements
↖︎
↑
↗︎
←
●
→
↙︎
↓
↘︎
Box
html
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="indicator"> <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span> <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span> <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span> <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span> <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span> <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span> <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span> <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span> <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span> <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div> </div> |
Indicator in Tabs
html
1 2 3 4 5 6 7 8 | <div class="tabs tabs-lifted"> <a class="tab">Messages</a> <a class="indicator tab tab-active"> Notifications <span class="indicator-item badge">7</span> </a> <a class="tab">Requests</a> </div> |
Indicator on Input
Required
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item badge badge-neutral badge-sm">Required</span> <input type="text" placeholder="Your email address" class="input" /> </div> |
Indicator on Image
Only available for Pro users
![Tailwind CSS examples]()
html
1 2 3 4 5 6 7 8 9 | <div class="indicator"> <span class="indicator-item indicator-middle indicator-center badge"> Only available for Pro users </span> <img alt="Tailwind CSS examples" src="" /> </div> |
Indicator on Cards
New
Product Name
Product description and details go here.
html
1 2 3 4 5 6 7 8 9 | <div class="indicator"> <span class="indicator-item badge badge-success">New</span> <div class="card card-outline"> <div class="card-content"> <h2 class="card-title">Product Name</h2> <p>Product description and details go here.</p> </div> </div> </div> |
Indicator on Avatar
JS
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span> <div class="avatar">JS</div> </div> |
Responsive Behavior
New
html
1 2 3 4 | <div class="indicator"> <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span> <button class="btn">Responsive</button> </div> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 指标 类名称和结构。不再有幻觉课程。