CSS: badge ​

.instui-badge — یک نقطهٔ کوچک شمارش یا وضعیت که روی گوشهٔ یک هدف قرار می‌گیرد.

برای قرار دادن یک نشان (badge) روی هدف، هر دو را داخل یک .instui-badge-wrapper (لنگر موقعیت) قرار دهید و نشان را با یک مدیفایر -placement-* ثابت کنید.

Source: badge.css

نحوه استفاده ​

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

نماش ​

نمونه‌ها ​

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

ساختار ​

نشان به‌صورت درون‌خطی خودش رندر می‌شود، یا داخل یک instui-badge-wrapper اختیاری که آن را روی هدف لنگر می‌کند.

text
.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;

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-color-dangerیک شمارشِ هشدار/خطا.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successیک شمارش مثبت/تکمیل‌شده.
.-placement-bottom-endموقعیت در گوشهٔ پایین-پایان.
.-placement-bottom-startموقعیت در گوشهٔ پایین-شروع.
.-placement-end-centerموقعیت مرکز شده روی لبهٔ انتهایی.
.-placement-start-centerموقعیت مرکز شده روی لبهٔ شروع.
.-placement-top-endموقعیت در گوشهٔ بالا-پایان.
.-placement-top-startموقعیت در گوشهٔ بالا-شروع.
.-pulseیک حلقهٔ تپندهٔ جلب‌توجه.
.-standaloneبه‌صورت درون‌خطی رندر شود، نه قرار گرفته روی گوشهٔ هدف.
.-type-notificationفقط یک نقطه، بدون شمارش.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::beforeحلقهٔ تپندهٔ جلب‌توجه که با رنگ تاکیدیِ نشان کشیده می‌شود (نوع -pulse).

خواص سفارشی ​

خاصیتنوعپیش‌فرضتوضیحات
--pantoken-badge-accent<color>—پرکنندهٔ چیپ؛ هر نوع -color-* و حلقهٔ پالس از آن می‌خوانند.
--pantoken-badge-text<color>—رنگ متن، که با رنگ تاکیدی جفت شده تا خوانایی حفظ شود.

انیمیشن‌ها ​

انیمیشنتوضیحات
pantoken-badge-pulseانیمیشن حلقهٔ پالس.

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--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

مرتبط ​

  • pill — همتای چیپ برچسبِ درون‌خطی.