更新记录

0.1.8（2026-08-18） 下载此版本

  • 蒸汽模式兼容：lines CSS 声明迁移为 <text> 的 :max-lines 属性（官方蒸汽模式方案），消除 Vapor 运行时与 CSS 编译器警告

0.1.6（2026-08-18） 下载此版本

  • 修复徽标在居中容器（如 nax-grid 宫格单元格）内被 align-self: flex-start 顶到一侧的偏移：移除根节点 align-self，气泡改为定位在按内容收缩的锚点容器上，根节点交由父级对齐；各端行为一致

0.1.5（2026-08-14） 下载此版本

  • readme 移除"平台说明"小节（processing 动画端差异说明）
查看更多

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ √ √ √

其他

多语言 暗黑模式 宽屏模式
× √ ×

nax-badge

uni-app x 徽标组件，提供常用能力。

主题

通过 CSS 变量覆盖：

Token 用途
--nax-color-error 错误色
--nax-color-info 信息色
--nax-color-success 成功色
--nax-color-warning 警告色

依赖

  • nax-ui-theme（CSS 变量 --nax-*）

基础用法

<!-- 锚定在内容右上角 -->
<nax-badge value="8">
  <view class="box"></view>
</nax-badge>

<!-- 红点 -->
<nax-badge dot>
  <view class="box"></view>
</nax-badge>

<!-- 独立展示 -->
<nax-badge alone value="99+"></nax-badge>

Props

属性 类型 默认 说明
value string '' 显示值；数字超过 max 显示 {max}+
max number 0 最大值，0 表示不限制
dot boolean false 红点模式
show-zero boolean false 值为 0 时是否展示
show boolean true 是否显示徽标
processing boolean false 处理中波纹
alone boolean false 独立展示（非角标定位）
type string default default / success / error / warning / info
color string '' 自定义颜色，覆盖 type
offset-x string '' 水平偏移，正值向右
offset-y string '' 垂直偏移，正值向下
custom-class string '' 根节点扩展 class

插槽

名称 说明
default 被徽标锚定的内容
value 自定义徽标内容

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。