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 — 内联标签芯片的对应项。