Badge 徽章

徽章组件，用于显示消息数量、状态等。

基础用法

<div class="sa-badge">
  <div class="sa-badge__content">
    <button class="sa-button">消息</button>
  </div>
</div>

<script>
  SA.init('body');
  const badge = new SaBadge('.sa-badge', {
    value: 5
  });
</script>

加载 SanoUI 组件中...

不同类型

通过 type 配置徽章类型。

<div class="sa-badge">
  <div class="sa-badge__content">
    <button class="sa-button">消息</button>
  </div>
</div>

<script>
  // 主要类型
  new SaBadge('.sa-badge', {
    value: 5,
    type: 'primary'
  });
  
  // 成功类型
  new SaBadge('.sa-badge', {
    value: 5,
    type: 'success'
  });
  
  // 警告类型
  new SaBadge('.sa-badge', {
    value: 5,
    type: 'warning'
  });
  
  // 危险类型
  new SaBadge('.sa-badge', {
    value: 5,
    type: 'danger'
  });
  
  // 信息类型
  new SaBadge('.sa-badge', {
    value: 5,
    type: 'info'
  });
</script>

加载 SanoUI 组件中...

点状徽章

通过 isDot: true 配置点状徽章，用于显示状态。

<div class="sa-badge">
  <div class="sa-badge__content">
    <button class="sa-button">状态</button>
  </div>
</div>

<script>
  SA.init('body');
  const badge = new SaBadge('.sa-badge', {
    isDot: true
  });
</script>

加载 SanoUI 组件中...

自定义数值

当数值超过 max 时，会显示 ${max}+。

const badge = new SaBadge('.sa-badge', {
  value: 100,
  max: 99 // 超过99显示99+
});

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaBadgeOptions	{}

配置选项

参数	说明	类型	可选值	默认值
value	显示数值	number | string	-	0
max	最大值	number	-	99
type	徽章类型	string	primary / success / warning / danger / info	danger
isDot	是否为点状徽章	boolean	-	false
hidden	是否隐藏	boolean	-	false

方法

方法名	说明	参数	返回值
setValue	设置数值	value: number | string	void
setHidden	设置隐藏状态	hidden: boolean	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const badge = new SaBadge('.sa-badge', {
  value: 5,
  type: 'danger',
  max: 99
});

// 更新数值
badge.setValue(10);

// 隐藏徽章
badge.setHidden(true);

// 显示徽章
badge.setHidden(false);

点状徽章

const badge = new SaBadge('.sa-badge', {
  isDot: true,
  type: 'success'
});

实际使用场景

场景 1：消息通知徽章

在导航菜单或按钮上显示未读消息数量。

<div style="display: flex; gap: 1rem;">
  <div class="sa-badge">
    <div class="sa-badge__content">
      <button class="sa-button">消息</button>
    </div>
  </div>
  
  <div class="sa-badge">
    <div class="sa-badge__content">
      <button class="sa-button">通知</button>
    </div>
  </div>
</div>

<script>
  SA.init('body');
  
  const messageBadge = new SaBadge(document.querySelectorAll('.sa-badge')[0], {
    value: 5,
    type: 'danger'
  });
  
  const notifyBadge = new SaBadge(document.querySelectorAll('.sa-badge')[1], {
    value: 12,
    type: 'warning',
    max: 99
  });
  
  // 模拟消息更新
  setInterval(() => {
    const newValue = Math.floor(Math.random() * 20);
    messageBadge.setValue(newValue);
  }, 3000);
</script>

加载 SanoUI 组件中...

场景 2：在线状态指示

使用点状徽章显示用户在线状态。

<div style="display: flex; gap: 1rem; align-items: center;">
  <div class="sa-badge">
    <div class="sa-badge__content">
      <div style="width: 40px; height: 40px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        用户
      </div>
    </div>
  </div>
  
  <div class="sa-badge">
    <div class="sa-badge__content">
      <div style="width: 40px; height: 40px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
        用户
      </div>
    </div>
  </div>
</div>

<script>
  SA.init('body');
  
  // 在线状态
  new SaBadge(document.querySelectorAll('.sa-badge')[0], {
    isDot: true,
    type: 'success'
  });
  
  // 离线状态
  new SaBadge(document.querySelectorAll('.sa-badge')[1], {
    isDot: true,
    type: 'info'
  });
</script>

加载 SanoUI 组件中...