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

Thành phần thẻ

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

Thẻ (chip) Tailwind CSS chỉ có CSS ​​với các biến thể màu sắc, kiểu dáng mềm mại và nút có thể tháo rời. Kích thước xs-lg. 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 thẻ hiển thị các mẩu thông tin nhỏ, được gắn nhãn, được sử dụng để phân loại, lọc hoặc gắn nhãn nội dung. Được xây dựng bằng HTML ngữ nghĩa và kiểu dáng linh hoạt, thẻ giúp người dùng nhanh chóng xác định loại nội dung, trạng thái hoặc danh mục. Hệ thống thẻ Frutjam hỗ trợ nhiều kích thước, màu sắc, kiểu dáng và hình dạng—lý tưởng cho danh sách kỹ năng, danh mục bài viết, nhãn trạng thái và siêu dữ liệu nội dung.

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ả
tagCăn cứNhãn nội tuyến để phân loại hoặc xác định nội dung
tag-outlinePhong cáchTô màu trong suốt với đường viền màu
tag-softPhong cáchNền màu bị tắt tiếng
tag-squarePhong cáchLàm tròn nhẹ (ít hơn viên thuốc mặc định)
tag-removeCông cụ sửa đổiNút loại bỏ/xóa bên trong thẻ
tag-xsKích cỡCực nhỏ (phông chữ 0,6875rem)
tag-smKích cỡNhỏ (phông chữ 0,75rem)
tag-mdKích cỡTrung bình (phông chữ 0,8125rem, mặc định)
tag-lgKích cỡLớn (phông chữ 0,9375rem)
tag-xlKích cỡCực lớn (phông chữ 1rem)
tag-primaryMàu sắcMàu chủ đề chính
tag-secondaryMàu sắcMàu chủ đề phụ
tag-accentMàu sắcMàu chủ đề nhấn mạnh
tag-neutralMàu sắcMàu chủ đề trung tính
tag-infoMàu sắcMàu sắc ngữ nghĩa thông tin
tag-successMàu sắcMàu ngữ nghĩa thành công
tag-warningMàu sắcMàu ngữ nghĩa cảnh báo
tag-errorMàu sắcLỗi ngữ nghĩa màu sắc

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

1
2
3
<div class="tag">Tag</div>
<div class="tag">Another tag</div>
<div class="tag">Third tag</div>

1
2
3
<div className="tag">Tag</div>
<div className="tag">Another tag</div>
<div className="tag">Third tag</div>

Kích thước thẻ

html 
1
2
3
4
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>

Màu thẻ

html 
1
2
3
4
5
6
7
8
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>

Kiểu thẻ

html 
1
2
3
4
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>

Hình dạng thẻ

html 
1
2
3
4
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>

Gắn thẻ với biểu tượng

html 
1
2
3
4
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>

Thẻ có thể đóng

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

Danh sách thẻ

html 
1
2
3
4
5
6
7
8
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</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 Nhãn 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