Easy UI

Appearance

Badge 徽标 ​

出现在按钮、图标旁的数字或状态标记。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-badge.js";
</script>
js
import "easy-component-ui/ea-badge";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

通过设置 value 属性展示新消息数量。

commentsrepliescommentsrepliescommentscustom background
查看代码
html
<div class="demo row">
  <ea-badge value="12">
    <ea-button>comments</ea-button>
  </ea-badge>
  <ea-badge value="3" variant="primary">
    <ea-button>replies</ea-button>
  </ea-badge>
  <ea-badge value="12" variant="success">
    <ea-button>comments</ea-button>
  </ea-badge>
  <ea-badge value="3" variant="warning">
    <ea-button>replies</ea-button>
  </ea-badge>
  <ea-badge value="3" variant="info">
    <ea-button>comments</ea-button>
  </ea-badge>
  <ea-badge value="3" color="green">
    <ea-button>custom background</ea-button>
  </ea-badge>
</div>

最大值 ​

可通过设置 max 属性自定义最大值。

TIP

max 属性接受一个 Number，需要注意的是，只有当 value 为 Number 时，它才会生效。

commentsreplies
查看代码
html
<div class="demo row">
  <ea-badge value="200" max="99">
    <ea-button>comments</ea-button>
  </ea-badge>
  <ea-badge value="100" max="10">
    <ea-button>replies</ea-button>
  </ea-badge>
</div>

自定义显示内容 ​

你也可以展示除数字以外你想要展示的任何值。或者可以使用 content 插槽自定义内容。

当 value 是 String 时，可以显示自定义文字。或者使用 content 插槽。

评论回复
查看代码
html
<div class="demo">
  <div class="row">
    <ea-badge value="new">
      <ea-button>comments</ea-button>
    </ea-badge>
    <ea-badge value="hot">
      <ea-button>replies</ea-button>
    </ea-badge>
  </div>
  <ea-badge value="99">
    <ea-button>share</ea-button>
    <div slot="content">
      <ea-icon name="share-nodes" part="custom-icon"></ea-icon>
      <span data-value part="custom-value"></span>
    </div>
  </ea-badge>
</div>
css
ea-badge::part(custom-icon) {
  color: white;
  font-size: 12px;
  margin-right: 2px;
}
ea-badge::part(custom-value) {
  font-size: 14px;
}

小红点 ​

通过一个小红点标记来告知用户有新内容。

使用 is-dot 属性。是个布尔值。

queryshare
查看代码
html
<div class="demo row">
  <ea-badge is-dot>query</ea-badge>
  <ea-badge id="hiddenBadge" is-dot>
    <ea-button icon="share-nodes">share</ea-button>
  </ea-badge>
  <ea-badge is-dot>
    <ea-button icon="envelope"></ea-button>
  </ea-badge>
</div>
js
const hiddenExample = {
  badge: document.querySelector("#hiddenBadge"),

  init() {
    this.badge.addEventListener("mouseover", () => {
      this.badge.setAttribute("data-hidden", "");

      this.badge.addEventListener(
        "mouseout",
        () => {
          this.badge.removeAttribute("data-hidden");
        },
        { once: true }
      );
    });
  },
};
hiddenExample.init();

偏移量 ​

设置徽章点的偏移，格式是 [左，顶部]，代表状态点从左侧和默认位置顶部的偏移。

offset
查看代码
html
<div class="demo">
  <ea-badge class="item" value="0" offset-x="10" offset-y="5">
    <ea-button>offset</ea-button>
  </ea-badge>
</div>

Badge API ​

Badge Attributes ​

参数说明类型可选值默认值
value徽章显示的值；可以是数字或字符串；当为数字且超过 max 时会显示为 {max}+String—""
max最大值阈值，超过显示为 {max}+；仅当 value 为 Number 时生效Number—Infinity
variant徽标类型Stringprimary | success | warning | danger | infodanger
color自定义背景色，设置后覆盖 variant 的背景色String (CSS color)—""
is-dot是否以小圆点形式显示徽章（不显示数字）Boolean—false
data-hidden是否隐藏徽章Boolean—false
show-zero值为零时是否显示 BadgeBoolean—true
offset-x徽章在 X 轴上的偏移（像素）Number—0
offset-y徽章在 Y 轴上的偏移（像素）Number—0

Badge CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
containerea-badge 外层容器（包含徽章与插槽内容）
content徽章显示值的容器（内部为 <sup> 元素）

Badge Slots ​

名称说明
default默认插槽，组件的子节点通常为触发目标（如按钮、图标等），徽章会定位在该元素上
content自定义徽标内容，内部使用 data-value 标记值显示位置

Badge CSS Properties ​

名称说明
--ea-badge-color徽标背景颜色
--ea-badge-text-color徽标文字颜色
--ea-badge-font-size徽标文字大小
--ea-badge-size徽标高度
--ea-badge-dot-size小圆点尺寸
--ea-badge-spacing徽标内边距
--ea-badge-border-radius徽标圆角
--ea-badge-offset-xX 轴偏移量
--ea-badge-offset-yY 轴偏移量