跳到主要内容

StyleSetter

简介

通过开启 StyleSetter,我们可以将样式配置面板来配置样式属性。

展示

setter 配置

属性名类型说明
unitString默认值 px
placeholderScaleNumber默认计算尺寸缩放 默认值为 1 在没有设定数值的时候,系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下,例如手机场景,在编辑器展示的是 375 的实际宽度,但是实际设计尺寸是 750 的宽度,这个时候需要对这个计算尺寸设成 2
showModuleListString[]默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块,可以针对不同的场景按需进行展示。 例如文字的组件,我不需要修改边框的样式,就可以把边框模块隐藏掉
isShowCssCodeBoolean默认值: true, 是否展示css源码编辑
layoutPropsConfigObject布局样式设置
layoutPropsConfig.showDisPlayListString[]默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] 可按需展示
layoutPropsConfig.isShowPaddingString默认值 true 是否展示内边距(四个边)
layoutPropsConfig.isShowMarginBoolean默认值 true 是否展示外边距(四个边)
layoutPropsConfig.isShowWidthHeightBoolean默认值 true 是否展示宽高
fontPropsConfigObject文字样式设置
fontPropsConfig.fontFamilyListArray[ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项
positionPropsConfigObject位置样式设置
positionPropsConfig.isShowFloatBoolean默认 true 是否展示浮动
positionPropsConfig.isShowClearBoolean默认 true 是否展示清除浮动