CSS: badge

.instui-badge — Một chấm nhỏ biểu thị số lượng hoặc trạng thái đặt trên góc của mục tiêu.

Để đặt một badge phía trên mục tiêu, bọc cả hai trong một .instui-badge-wrapper (neo vị trí) và ghim badge bằng modifier -placement-*.

Source: badge.css

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

Demo

Các ví dụ

<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

Cấu trúc

Badge được hiển thị inline tự nó, hoặc bên trong một instui-badge-wrapper tùy chọn để neo nó phía trên mục tiêu.

.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge

flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa

Bộ sửa	Mô tả
.-color-danger	Một bộ đếm chú ý/lỗi.
.-color-inverse	On-dark: a light chip with dark text.
.-color-success	Một bộ đếm tích cực/hoàn thành.
.-placement-bottom-end	Vị trí ở góc đáy-đầu (bottom-end).
.-placement-bottom-start	Vị trí ở góc đáy-bắt đầu (bottom-start).
.-placement-end-center	Vị trí ở giữa cạnh kết thúc (centered on the end edge).
.-placement-start-center	Vị trí ở giữa cạnh bắt đầu (centered on the start edge).
.-placement-top-end	Vị trí ở góc trên-đầu (top-end).
.-placement-top-start	Vị trí ở góc trên-bắt đầu (top-start).
.-pulse	Một vòng nhấp nháy thu hút chú ý.
.-standalone	Hiển thị inline, không định vị phía trên góc của mục tiêu.
.-type-notification	Chỉ một chấm, không có số lượng.

Phần tử giả

Phần tử giả	Mô tả
::before	Vòng nhấp nháy thu hút chú ý được vẽ bằng màu nhấn của badge (variant -pulse).

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-badge-accent	<color>	—	Màu nền chip; mọi variant -color-* và vòng nhấp nháy lấy màu từ đây.
--pantoken-badge-text	<color>	—	Màu văn bản, được ghép với màu nhấn để đảm bảo dễ đọc.

Hoạt ảnh

Hoạt ảnh	Mô tả
pantoken-badge-pulse	Hoạt ảnh vòng nhấp nháy (pulse).

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-border-width-md	<length>	0.125rem
--instui-component-badge-border-radius	<length>	999rem
--instui-component-badge-color	<color>	#ffffff
--instui-component-badge-color-danger	<color>	#E62429
--instui-component-badge-color-inverse	<color>	#273540
--instui-component-badge-color-primary	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success	<color>	#03893D
--instui-component-badge-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size	<length>	0.75rem
--instui-component-badge-font-weight	<integer>	600
--instui-component-badge-padding	<length>	0.25rem
--instui-component-badge-size	<length>	1rem
--instui-spacing-space-sm	<length>	0.5rem

Liên quan

• pill — Phần nhãn chip inline tương ứng.