jzfw-ui

Appearance

jzfw-ui

jzfw-ui 操作手册 ​

零外部依赖、可独立分发的 uni-app x 组件库

纯 UCSS 样式 + TS 主题令牌驱动，不依赖 Tailwind、不依赖任何宿主框架代码，可脱离宿主项目单独使用。

uni-app x ^5.24HBuilderX ^4.75App-Android / iOS / 鸿蒙Web(H5)微信小程序79+ 组件7 语种

🧩 自包含 ​

内置 core（类型判定、对象、单位、设备、安全区、类名解析、透传解析、uuid）、theme（明暗令牌表 + 颜色解析）、locale（7 语种词典）、hooks、icons，复制目录即可用。

🎨 纯 UCSS ​

样式统一 <style lang="scss" scoped>，无 @apply、无 CSS 变量、无后代 / 兄弟 / 复合选择器、无 @keyframes（动画走 UniElement.animate()）。

🌗 TS 主题令牌 ​

颜色在 TS 侧解析后写入内联 :style，规避原生端对自定义 CSS 变量支持不完整的问题，明暗主题一键切换、跟随系统。

🔀 透传 API（pt） ​

通过一个 pt 对象穿透定制组件内部各部位样式，突破主 API 限制，提供更灵活的定制能力。

快速开始 ​

将 jzfw-ui 目录放入项目 uni_modules/ 下，组件遵循 easycom 规则自动注册，模板中直接使用 <jz-button> 等标签。

html
<template>
  <jz-page>
    <jz-button type="primary" icon="send-plane-fill">发送</jz-button>
  </jz-page>
</template>

<script setup lang="uts">
  import { initTheme, initLocale } from "@/uni_modules/jzfw-ui";

  onLaunch(() => {
    initTheme();
    initLocale();
  });
</script>

完整步骤见 安装与引入。

组件总览 ​

分类组件
基础组件text、icon、button、image、tag、avatar、badge、loading、empty、row、col、safe-area、page
表单组件form、form-item、input、textarea、input-number、input-otp、radio、checkbox、switch、rate、slider、select、select-date、select-time、cascader、calendar、calendar-select、upload、picker-view、select-trigger、keyboard-number、keyboard-car、keyboard-password
布局组件tabs、tabbar、collapse、sticky、topbar、footer、float-view、back-top
数据展示list、list-item、list-view、waterfall、banner、marquee、pagination、timeline、timeline-item、draggable、filter-bar、filter-item、tree、tree-item、read-more、index-bar
状态组件badge、noticebar、countdown、rolling-number、progress、progress-circle、skeleton、loadmore
反馈组件popup、action-sheet、confirm、toast、jz-ui
其他组件qrcode、sign、watermark、cropper、canvas、slide-verify、select-seat

阅读指南 ​

平台支持 ​

平台支持情况
App-Android / App-iOS✅ 完整支持
App-鸿蒙 (HarmonyOS)✅ 支持
Web (H5) Chrome / Safari✅ 条件编译适配
微信小程序✅ 条件编译适配

主题跟随系统：App 端监听 onOsThemeChange / onAppThemeChange，小程序端监听 onHostThemeChange，H5 端由宿主调用 setTheme 桥接。

说明 ​

本手册由 uni_modules/jzfw-ui 的组件源码（props.uts / .uvue）与 pages/demo 示例页整理生成，Props 的「说明」列直接取自源码注释。各属性的默认值以对应组件 .uvue 中的 defineProps 声明为准。

jzfw-ui 操作手册

Copyright © 2026 jzfw-ui