CSS: badge ​

.instui-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僅圓點，無計數。

偽元素 ​

偽元素說明
::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 — 內聯標籤芯片的對應物。