主题配置
介绍
本配置参数会影响整个app风格，请慎重配置，或者根据你的UI/UX设计师指示配置
可以在任意位置导入并设置，立即生效，全局响应
配置文件路径
导入
ts
import { xConfig,setConfig } from "@/uni_modules/tmx-ui"全局的默认加载配置
你可以在main.uts中安装的时候就统一配置好整体app的风格属性
ts
import Xui from "@/uni_modules/tmx-ui"
app.use(Xui,{
config:null, // 可选，这里的配置就是下面的类型XCONFIG中的对应配置
i18nOptions:null // 可选，多语言配置
})动态通过函数配置所全局风格
ts
setConfig({
字段见下面底部所有可用字段,这里全是可选的,设置哪个就哪个生效.
})这里着重讲下其中的theme字段,是1.1.8中增加的 可以设置同名主题以覆盖内置的主题颜色,比如success,error等如:
ts
//就会覆盖内置的主题名称.
setConfig({
theme:new Map<string,string>([
['primary','#ff0000'],
['succeess','#00ffff'],
['error','#ff00ff'],
]),
})单项设置全局主题，有两种方式
ts
import { setThemePrimary,xConfig } from "@/uni_modules/tmx-ui"
//使用setThemePrimary来设置，推荐
setThemePrimary(red)
//直接使用xConfig设置
xConfig.color = '#ff0000'获取全局主题，有两种方式
ts
import { getThemePrimary,xConfig } from "@/uni_modules/tmx-ui/index.uts"
//取得当前主题
getThemePrimary()
//直接使用xConfig
console.log(xConfig.color)自定义组件，自适应主题？
您应该在组件内使用computed来返回这样给界面上使用保持响应
ts
import { xConfig } from "@/uni_modules/tmx-ui/index.uts"
const _primary = computed(()=>xConfig.color)设置/获取暗黑模式
ts
import { xConfig,setDarkModel,getDarkModel } from "@/uni_modules/tmx-ui/index.uts"
setDarkModel(value:'dark'|'auto'|'light')
//打印当前暗黑状态
console.log(getDarkModel())自定义组件自适应暗黑
ts
import { xConfig } from "@/uni_modules/tmx-ui/index.uts"
const _dark = computed(()=>xConfig.dark == 'dark')全局字号
ts
import { xConfig } from "@/uni_modules/tmx-ui/index.uts"
// 打印当前的字号缩放
console.log(xConfig.fontScale)
//自己写自适应全局字号
const _fontSize = computed(()=>(xConfig.fontScale*您的基础字号).toString()+'px')其它风格设置
全局按钮圆角，卡片圆角，全局的容器背景，间距，等等一众配置，请参考下面里面的类型文件注释自己配置。
xConfig参数配置如下 ：
ts
export type XCONFIG = {
i18n: I18nGlobal | null;
/** 默认颜色主题名称的配置 */
theme: Map<string, string>;
/** 全局的主题色 **/
color: string;
/** 全局默认的文本x-text色 */
fontColor: string;
/** 全局默认的文本x-text暗黑字体色 */
fontDarkColor: string;
/** 主题配置,auto,dark,light */
dark: "dark" | "light" | "auto";
/** 设计基准默认是375，如果修改会影响组件的尺寸，比如你设置为414，那么假设12号最终计算过程是414/375*12=13.248px,如果你小于375则不计算。 */
designSize: number;
/** 当屏幕宽大于或者等于667时再直接采用以375为基座，按照designSize比例来的原始尺寸，即尺寸不会变大也不会变小了 */
maximumCalculatedSize: number;
/** 设计单位px,rpx */
unit: "px" | "rpx";
/** 所有组件的文字统一缩放的倍数,如果你使用unit为rpx时，fontScale不要去设置,如果unit为px时，可以设置此值来缩放大小。 */
fontScale: number;
/** x-text默认的字号，如果你使用unit为rpx时，fontScale不要去设置 */
fontSize: string;
/** 一般容器sheet的暗黑背景 */
sheetDarkColor: string;
/** 一般输入框的次级暗黑背景 */
sheetSecodBgDarkColor:string;
/** 一般容器边线颜色如果你布局自己写了默认的边线色，但忘记填写组件上的暗黑线时，会取这里的值 */
sheetDarkBorderColor: string[];
/** 输入框,表单，常规灰背景待统一的二级暗黑背景 */
inputDarkColor: string;
/** 输入框默认的亮系背景色方便统一设计稿 */
inputBgColor: string;
/** 输入框默认的统一提示placeholderStyle方便统一设计稿 */
placeholderStyle: string;
/** 一般的表单，列表底的暗黑统一边线颜色 */
borderDarkColor: string;
/** 统一的输入框圆角 */
inputRadius: string;
/**
* 输入框统一的聚集样式
* 第3表示默认的边颜色(如果为空表示默认边颜色不生效.),第4表示聚焦时的颜色(空表示取全局color,transparent为不生效就是没有聚集样式)
* ['2px','solid','','']
*/
inputFocusBorder: string[];
/** 统一的按钮圆角 */
buttonRadius: string;
/** 统一的标签圆角 */
tagRadius: string;
/**
* 统一列表的圆角
*/
cellRadius: string;
/**
* 列表为cellCard组件时的边距
* [x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下
*/
cellMargin: 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;
/** 默认图片预览是否开启 */
previewImage: boolean;
/** drawer,modal弹层默认的按钮是否是半圆，如果关闭就是1.x的风格 */
modalActionsHalfRound: boolean;
/** 统一的按钮投影[x,y,blur]，建议值：[0,3,10],另外由于布局因此，投影它需要padding来空出投影值否则被裁剪 */
buttonShadow: number[]
};全局的tbbar配置
ts
export type XTABBARCONFIG = {
/**
* 底部导航栏选中项索引值。
*/
tabbarActiveIndex : number,
/**
* 底部导航的高，可以全局读取到。建议读取后computed来包下
*/
tabaarHeight:number,
/**
* 导航栏数据。
*/
list : TABBAR_ITEM_INFO[]
}默认参数
ts
export const xConfig = reactive({
i18n:null,
theme: new Map<string, string>([]),
/** 全局的主题色 */
color: "#0091FF",
/** 主题配置,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",
/** 如果你使用unit为rpx时，fontScale不要去设置,如果unit为px时，可以设置此值来缩放大小。 */
fontScale: 1,
/** x-text默认的字号，如果你使用unit为rpx时，fontScale不要去设置 */
fontSize: "16",
/** 全局默认的文本x-text色 */
fontColor: "#1d1d1f",
/** 全局默认的文本x-text暗黑字体色 */
fontDarkColor: "#f5f5f7",
/** 一般容器sheet的暗黑背景 */
sheetDarkColor: "#1c1c1E",
sheetDarkBorderColor: ["#2c2c2e"],
sheetSecodBgDarkColor: "#141416",
/** 输入框暗黑背景 */
inputDarkColor: "#2c2c2e",
/** 输入框默认的亮系背景色方便统一设计稿 */
inputBgColor: "#f2f2f7",
/** 输入框默认的统一提示placeholderStyle方便统一设计稿 */
placeholderStyle: "color:#8e8e93",
borderDarkColor: "#2c2c2e",
/** l输入框的圆角 */
inputRadius: "14",
inputFocusBorder: [],
/** 按钮的圆角 */
buttonRadius: "14",
/** 统一的标签圆角 */
tagRadius: "5",
/** 列表cell组件为card时的圆角 */
cellRadius: "14",
/** 列表为cellCard组件时的边距 */
cellMargin: ["14px", "0", "14px", "6px"],
/** 容器的全局圆角 */
sheetRadius: ["14"],
/** 容器的全局间隙 */
sheetMargin: ["14", "0", "10", "14"],
/** 容器的全局内间隙 */
sheetPadding: ["14"],
/**
* 影响：
* 抽屉打开方向为上和下时的圆角
* 浮动面板
* 动作菜单
* */
drawerRadius: "26",
/** 对话框modal的圆角 */
modalRadius: "18",
/** 开关的圆角 */
switchRadius: "32",
/**进度条的圆角 */
progressRadius: "32",
/** 未选中时的颜色 */
unRadioAndCheckBoxColor: "#8e8e93",
/** 单选按钮组的圆角 */
radioButtonRadius: "14",
/** 弹窗，弹层，对话框等等所有的动画类型。 */
animationFun: "cubic-bezier(.42,.38,.15,.93)",
/** 卡片的圆角 */
cardRound: "14",
closeIcon: "close-circle-fill",
/** 默认图片预览是否开启 */
previewImage: true,
modalActionsHalfRound:false,
buttonShadow:[0,2,5]
} 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" setup>
import { setThemePrimary,xConfig } from "@/uni_modules/tmx-ui"
const changePrimary = (val:string) =>{
setThemePrimary(val)
}
const changeRaius = (val:string) =>{
xConfig.buttonRadius = val
}
const changeCellRaius = (val:string) =>{
xConfig.cellRadius = val
}
</script>
<style lang="scss">
</style>