Skip to content

自定义主题样式

介绍

在需要更改主题样式时,可通过调用 IBestSetUIBaseStyle 方法设置样式。

更改主题

• 在项目的启动页面中,通过调用 IBestSetUIBaseStyle 方法,设置主题。
• 若项目使用了 IBestSetUIGlobalConfig 方法, 请确保在该方法之后调用 IBestSetUIBaseStyle !!!

ts
import { IBestSetUIBaseStyle } from "@ibestservices/ibest-ui";

onWindowStageCreate(windowStage: window.WindowStage): void {
	windowStage.loadContent('pages/Index', (err, data) => {
		IBestSetUIBaseStyle({
			primary: '#7232dd'
		})
	})
}

IBestUIBaseStyleObjType 类型说明

TIP

• 该类型即为IBestSetUIBaseStyle方法的参数类型,均为非必填类型,传入值会覆盖默认值,暂时支持这么多预设样式,随着组件丰富逐步完善!
• 默认单位为 vp, 当全局单位为 lpx 时, 以下数值会依据 designWidth 和当前设备屏幕宽度自动计算转化为lpx对应的视窗尺寸。

参数说明类型默认
defaultdefault 默认色string#FFFFFF
primaryprimary 反馈色string#3D8AF2
successsuccess 反馈色string#58DB6B
warningwarning 反馈色string#F29C73
dangerdanger 反馈色string#DB3131
primaryOpacityprimary 透明反馈色stringrgba(61, 138, 242, 0.1)
successOpacitysuccess 透明反馈色stringrgba(88, 219, 107, 0.1)
warningOpacitywarning 透明反馈色stringrgba(242, 156, 115, 0.1)
dangerOpacitydanger 透明反馈色stringrgba(219, 49, 49, 0.1)
spaceMini间距,一般用于 paddingmarginstring2
spaceBase间距,一般用于 paddingmarginstring4
spaceX间距,一般用于 paddingmarginstring6
spaceXs间距,一般用于 paddingmarginstring8
spaceSm间距,一般用于 paddingmarginstring12
spaceMd间距,一般用于 paddingmarginstring16
spaceLg间距,一般用于 paddingmarginstring24
spaceXl间距,一般用于 paddingmarginstring32
fontSizeXs文字大小string10
fontSizeSm文字大小string12
fontSizeMd文字大小string14
fontSizeLg文字大小string16
fontSizeXl文字大小string20
borderRadiusSm圆角大小string2
borderRadiusMd圆角大小string4
borderRadiusLg圆角大小string8
borderRadiusMax圆角大小string9999
lineHeightXs行高string14
lineHeightXsm行高string16
lineHeightSm行高string18
lineHeightMd行高string20
lineHeightLg行高string22
animationDuration动画时长,单位 ms,如Switch组件的切换动画时长number200