主题配置
介绍
本配置参数会影响整个app风格，请慎重配置，或者根据你的UI/UX设计师指示配置
可以在任意位置导入并设置，立即生效，全局响应
配置文件路径
导入
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"全局的默认加载配置
你可以在main.uts中安装的时候就统一配置好整体app的风格属性
ts
app.use(xui,{
config:null, // 可选，这里的配置就是下面的类型XCONFIG中的对应配置
i18nOptions:null // 可选，多语言配置
} as Tmui4xOptions)动态通过函数配置所全局风格
ts
xStore.setConfig({
字段见下面底部所有可用字段,这里全是可选的,设置哪个就哪个生效.
} as UTSJSONObject)这里着重讲下其中的theme字段,是1.1.8中增加的 可以设置同名主题以覆盖内置的主题颜色,比如success,error等如:
ts
//就会覆盖内置的主题名称.
xStore.setConfig({
theme:new Map<string,string>([
['primary','#ff0000'],
['succeess','#00ffff'],
['error','#ff00ff'],
]),
} as UTSJSONObject)单项设置全局主题，有两种方式
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
//使用setThemePrimary来设置，推荐
xStore.setThemePrimary(red)
//直接使用xConfig设置
xStore.xConfig.color = '#ff0000'获取全局主题，有两种方式
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
//取得当前主题
xStore.getThemePrimary()
//直接使用xConfig
console.log(xStore.xConfig.color)自定义组件，自适应主题？
您应该在组件内使用computed来返回这样给界面上使用保持响应
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
computed:{
_primary():string{
return xStore.xConfig.color
}
}设置/获取暗黑模式
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
xStore.setDarkModel(value:'dark'|'auto'|'light')
//打印当前暗黑状态
console.log(xStore.getDarkModel())自定义组件自适应暗黑
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
computed:{
_dark():boolean{
// xStore.xConfig.dark == 'light' 表示为亮
return xStore.xConfig.dark == 'dark'
}
}全局字号
ts
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
// 打印当前的字号缩放
console.log(xStore.xConfig.fontScale)
//自己写自适应全局字号
computed:{
_fontSize():string{
return (xStore.xConfig.fontScale*您的基础字号).toString()+'px'
}
}其它风格设置
全局按钮圆角，卡片圆角，全局的容器背景，间距，等等一众配置，请参考下面里面的类型文件注释自己配置。
xConfig参数配置如下 ：
ts
export type XCONFIG = {
/** 默认颜色主题名称的配置,同名的内置主题名称会被你这里的配置所覆盖. */
theme:Map<string,string>,
/** 全局的主题色 **/
color : string,
/** 主题配置,auto,dark,light */
dark : 'dark' | 'light' | 'auto',
/** 你的设计稿尺寸，默认是750 */
designSize : number,
/** 设计单位px,rpx */
unit : 'px' | 'rpx',
/** 语言 */
language : string,
/** 所有组件的文字统一缩放的倍数 */
fontScale : number,
/** 在web时的系统导航文本色 **/
navigationBarTextStyleDark : string,
/** 注意局部的page.json节点配置会覆盖这里 */
navigationBarTextStyleLight : string,
/** 在web时的系统导航背景色 **/
navigationBarBackgroundColorDark : string,
/** 注意局部的page.json节点配置会覆盖这里 */
navigationBarBackgroundColorLight : string,
/** 在web时的页面暗黑本色 **/
backgroundColorContentDark : string,
/** 注意局部的page.json节点配置会覆盖这里 */
backgroundColorContentLight : string,
/** 在web时的底部导航暗黑背景色 **/
tabarBackgroundColorDark : string,
/** 在web时的底部导航亮系背景色 **/
tabarBackgroundColorLight : string,
/** 一般容器sheet的暗黑背景 */
sheetDarkColor : string,
/** 一般容器边线颜色如果你布局自己写了默认的边线色，但忘记填写组件上的暗黑线时，会取这里的值 */
sheetDarkBorderColor : string[],
/** 输入框,表单，常规灰背景待统一的二级暗黑背景 */
inputDarkColor : string,
/** 一般的表单，列表底的暗黑统一边线颜色 */
borderDarkColor : string,
/** 统一的输入框圆角 */
inputRadius : string,
/**
* 输入框统一的聚集样式
* 第3表示默认的边颜色(如果为空表示默认边颜色不生效.),第4表示聚焦时的颜色(空表示取全局color,transparent为不生效就是没有聚集样式)
* ['2px','solid','','']
*/
inputFocusBorder:string[],
/** 统一的按钮圆角 */
buttonRadius : string,
/** 统一的标签圆角 */
tagRadius : string,
/**
* 统一列表的圆角
*/
cellRadius : string,
/** 容器的全局圆角 */
sheetRadius : string[],
/** 容器的全局间隙 */
sheetMargin : string[],
/** 容器的全局内间隙 */
sheetPadding : string[],
/**
* 影响：
* 抽屉打开方向为上和下时的圆角
* 浮动面板
* 动作菜单
* */
drawerRadius : string,
/** 对话框modal的圆角 */
modalRadius : string,
/** 开关的圆角 */
switchRadius : string,
/**进度条的圆角 */
progressRadius : string,
/** 未选中时的颜色 */
unRadioAndCheckBoxColor : string,
/** 单选按钮组的圆角 */
radioButtonRadius : string,
/** 弹窗，弹层，对话框等等所有的动画类型。 */
animationFun : string,
/** 卡片的圆角 */
cardRound : string,
/** 各种弹层右上角的关闭按钮图标名称,可以根据自己设计稿更换 **/
closeIcon:string
}全局的tbbar配置
ts
export type XTABBARCONFIG = {
/**
* 底部导航栏选中项索引值。
*/
tabbarActiveIndex : number,
/**
* 底部导航的高，可以全局读取到。建议读取后computed来包下
*/
tabaarHeight:number,
/**
* 导航栏数据。
*/
list : TABBAR_ITEM_INFO[]
}默认参数
ts
export const xConfig = reactive({
theme:new Map<string,string>([]),
i18n:createI18n({messages,locale:'zh-Hans'}),
/** 全局的主题色 */
color: "#0579FF",
/** 主题配置,auto,dark,light */
dark: 'auto',
/** 设计基准默认是375，如果修改会影响组件的尺寸，比如你设置为414，那么假设12号最终计算过程是414/375*12=13.248px,如果你小于375则不计算。 */
designSize: 375,
/** 当屏幕宽大于或者等于667时再直接采用以375为基座，按照designSize比例来的原始尺寸，即尺寸不会变大也不会变小了 */
maximumCalculatedSize:667,
/** 设计单位px,rpx */
unit: 'px',
/** 语言 */
language: "zh-Hans",
/** 如果你使用unit为rpx时，fontScale不要去设置,如果unit为px时，可以设置此值来缩放大小。 */
fontScale: 1,
/** x-text默认的字号，如果你使用unit为rpx时，fontScale不要去设置 */
fontSize: "16",
navigationBarTextStyleDark: "#ffffff",
/** 注意局部的page.json节点配置会覆盖这里 */
navigationBarTextStyleLight: "#000000",
navigationBarBackgroundColorDark: "#000000",
/** 注意局部的page.json节点配置会覆盖这里 */
navigationBarBackgroundColorLight: "#f5f5f5",
backgroundColorContentDark: "#000000",
/** 注意局部的page.json节点配置会覆盖这里 */
backgroundColorContentLight: "#f5f5f5",
tabarBackgroundColorDark: "#0a0a0a",
tabarBackgroundColorLight: "#FFFFFF",
/** 一般容器sheet的暗黑背景 */
sheetDarkColor: '#141414',
sheetDarkBorderColor: ["#232323"],
/** 输入框暗黑背景 */
inputDarkColor: '#272727',
/** 输入框默认的亮系背景色方便统一设计稿 */
inputBgColor: '#f5f5f5',
/** 输入框默认的统一提示placeholderStyle方便统一设计稿 */
placeholderStyle: '',
borderDarkColor: '#1c1c1c',
/** l输入框的圆角 */
inputRadius: "12",
inputFocusBorder:[],
/** 按钮的圆角 */
buttonRadius: "12",
/** 统一的标签圆角 */
tagRadius: "3",
/** 列表cell组件为card时的圆角 */
cellRadius: "12",
/** 列表为cellCard组件时的边距 */
cellMargin:['12px','0','12px','6px'],
/** 容器的全局圆角 */
sheetRadius: ["14"],
/** 容器的全局间隙 */
sheetMargin: ["14", "0", "14", "14"],
/** 容器的全局内间隙 */
sheetPadding: ["14"],
/**
* 影响：
* 抽屉打开方向为上和下时的圆角
* 浮动面板
* 动作菜单
* */
drawerRadius: "26",
/** 对话框modal的圆角 */
modalRadius: "18",
/** 开关的圆角 */
switchRadius: "32",
/**进度条的圆角 */
progressRadius: "32",
/** 未选中时的颜色 */
unRadioAndCheckBoxColor: "#cfcfcf",
/** 单选按钮组的圆角 */
radioButtonRadius: "10",
/** 弹窗，弹层，对话框等等所有的动画类型。 */
animationFun: 'cubic-bezier(.42,.38,.15,.93)',
/** 卡片的圆角 */
cardRound: '16',
closeIcon:"close-circle-fill"
} as XCONFIG)vue
<template>
<scroll-view style="flex:1">
<x-sheet :follow-theme="true">
<text class="text-weight-b text-white text-align-center mb-12" style="font-size: 46px;">X-UI</text>
<text class="text-size-m text-white text-align-center">这里只举例部分，还有更多全局统一设置的属性见文档。</text>
</x-sheet>
<x-sheet >
<x-text font-size="18" class=" text-weight-b mb-8">切换主题</x-text>
<view class="flex-row flex-row-center-between">
<x-button width="24%" @click="changePrimary('primary')" size="small" >默认</x-button>
<x-button width="24%" @click="changePrimary('parisviolet')" size="small" >巴黎紫</x-button>
<x-button width="24%" @click="changePrimary('venetianred')" size="small" >威尼斯红</x-button>
<x-button width="24%" @click="changePrimary('black')" size="small" >黑色</x-button>
</view>
</x-sheet>
<x-sheet >
<x-text font-size="18" class=" text-weight-b mb-8">按钮圆角</x-text>
<x-text color="#999999" >
圆角动态切换因要重新触发渲染才可立即生效，因此在实际实用时，建议预设全局圆角，如果要动态切换可热重载下程序或者刷新下页面。本页面切换会返上一页来达到生效。
</x-text>
<view class="flex-row flex-row-center-between mt-24">
<x-button width="24%" @click="changeRaius('4rpx')" size="small" >4rpx</x-button>
<x-button width="24%" @click="changeRaius('8rpx')" size="small" >8rpx</x-button>
<x-button width="24%" @click="changeRaius('18rpx')" size="small" >18rpx</x-button>
<x-button width="24%" @click="changeRaius('64rpx')" size="small" >64rpx</x-button>
</view>
</x-sheet>
<x-sheet >
<x-text font-size="18" class=" text-weight-b mb-8">列表Cell为card模式时的圆角</x-text>
<view class="flex-row ">
<x-button @click="changeCellRaius('20rpx')" size="small" class="mr-24" >16rpx</x-button>
<x-button @click="changeCellRaius('64rpx')" size="small" >64rpx</x-button>
</view>
</x-sheet>
</scroll-view>
</template>
<script lang="uts">
import { xStore } from "@/uni_modules/tmx-ui/index.uts"
export default {
data() {
return {
};
},
methods:{
changePrimary(val:string){
xStore.setThemePrimary(val)
},
changeRaius(val:string){
xStore.xConfig.buttonRadius = val
uni.navigateBack()
},
changeCellRaius(val:string){
xStore.xConfig.cellRadius = val
uni.navigateBack()
}
}
}
</script>
<style lang="scss">
</style>