更新记录

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

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

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

  • 精简 readme：移除内部开发向内容（设计说明 / 实现细节 / 平台差异实现等），只保留安装、用法、API、主题等用户文档

0.1.7（2026-08-07） 下载此版本

  • 支持 iOS 端：走 #ifndef APP-HARMONY 公共分支（width 过渡动画），无需额外端差异代码
查看更多

平台兼容性

uni-app x(4.25)

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

其他

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

# nax-progress

进度条。线形 / 圆形统一入口，用 shape 切换。

主题

通过 CSS 变量覆盖：

Token 用途
--nax-color-bg 背景色
--nax-color-divider 分割线色
--nax-color-error 错误色
--nax-color-info 信息色
--nax-color-primary 主题主色
--nax-color-success 成功色
--nax-color-text 主文字色
--nax-color-text-inverse 反白文字色
--nax-color-text-secondary 次要文字色
--nax-color-warning 警告色

依赖

  • nax-ui-theme（可选，CSS 变量 --nax-*）

基础用法

<!-- 线形（默认） -->
<nax-progress :percent="60"></nax-progress>

<!-- 圆形 -->
<nax-progress shape="circle" :percent="60"></nax-progress>

<!-- 语义色 -->
<nax-progress type="success" :percent="80"></nax-progress>
<nax-progress type="warning" :percent="40"></nax-progress>
<nax-progress type="error" :percent="20"></nax-progress>

<!-- 自定义信息区（需 useSlot） -->
<nax-progress :percent="50" use-slot>
  <text>一半</text>
</nax-progress>

Props

属性 类型 默认 说明
percent number 0 进度 0–100，越界自动夹取
shape string line line / circle
type string primary default / primary / info / success / warning / error（danger→error）
status string '' success / warning / error；有值时覆盖 type 颜色
size string md sm / md / lg
show-info boolean true 是否显示百分比/文案
text-inside boolean false 线形：文案画在进度条内
use-slot boolean false 使用默认插槽自定义信息区
stroke-width number 0 线形高度 / 圆形描边宽（px）；0 跟随 size
width number 0 圆形直径（px）；0 跟随 size
color string '' 激活色，覆盖 type/status
track-color string '' 轨道色；空则 divider token
pivot-text string '' 自定义文案；空则 {percent}%
custom-class string '' 根节点扩展 class

插槽

名称 说明
default 自定义信息区（需 use-slot；线形外侧/条内，或圆形中心）

说明

  • 主题优先 CSS 变量；color / track-color 仅作局部覆盖。

隐私、权限声明

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

无

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

无

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

无

许可协议

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

暂无用户评论。