更新记录

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

• 修复鸿蒙端（含蒸汽）按钮文字被误省略：max-lines="1" 与 text-overflow: ellipsis 在无宽度约束的 flex 子项上测量失真，鸿蒙端改为双分支渲染（不带省略），完整展示；其它端保持单行省略
• 修复模板条件编译注释位于标签属性区被解析为属性的告警：按钮文字改为条件编译双分支（注释移至标签外），消除安卓/iOS 端 "Property '<!--'" 警告

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

• readme 合并重复的“主题”小节：完整 Token 表 + 绿色主色示例并入一节

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

• 支持 iOS 端：App 端条件编译分支（loading 旋转、禁用透明度）已覆盖 APP-IOS，iOS 直接可用

平台兼容性

uni-app x(4.25)

其他

nax-button

nax-ui 通用按钮组件（uni-app x / uvue）。

色系与层级：

• 基础 variant="solid"
• 次要 variant="secondary"
• 次次要 variant="tertiary"
• 次次次要 variant="quaternary"
• 虚线 variant="dashed"
• 禁用 disabled

安装

uni_modules/nax-button

easycom 自动生效。

推荐同时安装主题包

uni_modules/nax-ui-theme

并在 App.uvue 引入：

@import "@/uni_modules/nax-ui-theme/theme/default.css";

页面根节点加 class="nax-theme"。未安装主题包时，组件仍可使用内置 fallback 颜色。

主题

通过 CSS 变量覆盖：

若希望使用默认绿色主色：

.nax-theme {
  --nax-color-primary: #18a058;
  --nax-color-primary-secondary: rgba(24, 160, 88, 0.16);
  --nax-color-primary-tertiary: rgba(24, 160, 88, 0.12);
}

依赖

安装 theme 后仍需：App.uvue @import + 应用 layout/页面 一处 class="nax-theme"。详见 uni_modules/nax-ui-theme/readme.md（L0/L1/L2）。

基础用法

<nax-button type="primary" label="确定" @click="onConfirm"></nax-button>

层级示例

<!-- 基础 -->
<nax-button label="基础"></nax-button>
<!-- 次要 -->
<nax-button variant="secondary" label="次要"></nax-button>
<!-- 次次要 -->
<nax-button variant="tertiary" label="次次要"></nax-button>
<!-- 次次次要 -->
<nax-button variant="quaternary" label="次次次要"></nax-button>
<!-- 虚线 -->
<nax-button variant="dashed" label="虚线"></nax-button>
<!-- 禁用 -->
<nax-button disabled label="禁用"></nax-button>

<!-- 主色 × 次要 -->
<nax-button type="primary" variant="secondary" label="Primary 次要"></nax-button>

图标

需要同时安装 nax-icon。推荐直接用 icon prop：

<nax-button type="primary" icon="search" label="搜索"></nax-button>
<nax-button type="primary" icon="arrow-right" icon-position="right" label="下一步"></nax-button>
<nax-button type="primary" shape="circle" icon="plus"></nax-button>

也可用插槽自定义图标：

<nax-button type="primary" label="搜索">
  <template #icon>
    <nax-icon name="search" size="sm"></nax-icon>
  </template>
</nax-button>

Loading

loading 为 true 时：

• 阻止 click
• 左侧显示旋转的 nax-icon name="loading"
• 隐藏 icon prop 与 #icon 插槽，避免与 loading 抢位

<nax-button type="primary" :loading="true" label="提交中"></nax-button>

Props

Events

Slots