低代码高性能原生UI框架全局配置
TIP
框架已适配深色模式、灰色模式（哀悼模式），并且内置字体大小、单位、强调色、背景色、文字颜色、内边距、外边距、圆角等20+项全局配置
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| debugLog | boolean | true | 开启debug打印 |
| unit | string | px | 单位 |
| darkMode | boolean | false | 深色模式 |
| grayMode | boolean | false | 灰色模式（哀悼模式） |
| followSys | boolean | false | 跟随系统 |
| primaryColor | string | #3c9cff | 主色调 |
| secondaryColor | string | #3c9cff | 次要色 |
| successColor | string | #5ac725 | 成功提示色 |
| errorColor | string | #f56c6c | 错误提示色 |
| warningingColor | string | #f9ae3d | 警告提示色 |
| infoColor | string | #909399 | 信息提示色 |
| backgroundColor | string | #f3f4f6 | 背景色 |
| fontColor | string | #333333 | 文本色 |
| placeholderColor | string | #c0c4cc | 占位色 |
| cancelColor | string | #a9a9a9 | 取消色 |
| borderColor | string | #e7e6e4 | 边框色 |
| hoverColor | string | #e7e6e4 | 按压色 |
| titleColor | string | #2C405A | 标题色 |
| subtitleColor | string | #555555 | 二级标题色 |
| paragraphColor | string | #3F536E | 段落色 |
| lineColor | string | #3F536E | 分割线色 |
| maskAlpha | number | 0.6 | 背景透明度 |
| fontSize | number | 15 | 文字大小 |
| radius | number | 6 | 圆角 |
| hmargin | number | 15 | 水平外边距 |
| vmargin | number | 15 | 垂直外边距 |
| hpadding | number | 15 | 水平内边距 |
| vpadding | number | 15 | 垂直内边距 |
| customFont | string | - | 网络字体路径 或 自定义字体路径 |
| customFamily | string | - | 自定义字体family |
| uptSystemStyle | boolean | true | 修改系统全局样式 |
全局修改
ts
// 切换深色模式
this.$ux.Conf.setDarkMode(true)// 切换深色模式
this.$ux.Conf.setDarkMode(true)ts
import { $ux } from '@/uni_modules/ux-frame';
// 切换深色模式
$ux.Conf.setDarkMode(true)import { $ux } from '@/uni_modules/ux-frame';
// 切换深色模式
$ux.Conf.setDarkMode(true)