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

Thành phần chỉ báo

Cập nhật lần cuối:

Chỉ báo CSS Tailwind chỉ có CSS ​​để phủ các huy hiệu hoặc dấu chấm trên bất kỳ góc thành phần nào. Các biến thể màu sắc và định vị. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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

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

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

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

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

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ẻ

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Chỉ số chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP