Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Indicator Component

CSS-only Tailwind CSS indicator for overlaying badges or dots on any element corner. Color variants and positioning. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Các thành phần chỉ báo hiển thị trạng thái, huy hiệu hoặc thông báo được định vị trên các thành phần khác. Được xây dựng với khả năng định vị tuyệt đối và kiểu dáng linh hoạt, các chỉ báo bao phủ thông tin quan trọng trên thẻ, hình đại diện và nút. Hệ thống chỉ báo Frutjam hỗ trợ nhiều vị trí, kích thước và màu sắc—lý tưởng cho huy hiệu thông báo, dấu trạng thái và tín hiệu trực quan.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
indicatorCăn cứTrình bao bọc có vị trí tương đối cho mục chỉ báo
indicator-itemCông cụ sửa đổiHuy hiệu hoặc phần tử dấu chấm được định vị tuyệt đối
indicator-topCông cụ sửa đổiVị trí mục ở cạnh trên cùng
indicator-middleCông cụ sửa đổiĐặt mục ở giữa theo chiều dọc
indicator-bottomCông cụ sửa đổiVị trí mục ở cạnh dưới cùng
indicator-startCông cụ sửa đổiVị trí mục ở cạnh trái
indicator-centerCông cụ sửa đổiVị trí mục ở trung tâm ngang
indicator-endCông cụ sửa đổiVị trí mục ở cạnh phải

Cách sử dụng cơ bản

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>

Vị trí chỉ báo

↖︎ ↑ ↗︎ ← ● → ↙︎ ↓ ↘︎
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>

Chỉ báo trong Tab

Messages Notifications 7 Requests
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>

Chỉ báo trên đầu vào

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>

Chỉ báo trên hình ảnh

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>

Chỉ báo trên thẻ

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>

Chỉ báo trên 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>

Hành vi đáp ứng

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>