#夏日挑战赛#PandUI系列之Style讲解 原创 精华

发布于 2022-7-28 00:35
浏览
1收藏

[本文正在参加星光计划3.0-夏日挑战赛]
接上一篇ETS自定义组件库PandaUI系列之PdButton 中提到的style

PandaUI在我设计构想的时候,就是为了帮助前端开发人员或小白开发人员可以快速的上手UI布局,所以在样式属实上和ETS的属性有部分不同,但完全兼容ETS的绝大多数公共属性,并且增加一些可选性。
例:官方中margin 的值为{top?: Length,right?: Length,bottom?: Length,left?: Length}| Length 而在PandaUI中可如官方一样设置margin值,同时也可单独以margin-left,margin-rightmargin-topmargin-bottom的类css方式独立的设置4个方位的margin值,同时考虑部分同学习惯驼峰式写变量,margin-left还可以写为marginLeft

类型及作用

style为json类型,在UI中会提前设置一些默认的样式属性,并且将样式添加到AppStorage中,方便后续使用者对预定义样式做一个系统性修改,毕竟UI样式并不能适配到每个人的所有需求及风格,只能预制一些工作来减少使用者的工作。

映射关系

作为基类的style收录了绝大多数官方ETS中的公共样式属性(剩余部分被弃用),而一些特定组件的样式属性,将以子类的方式进行扩展,拓展子类在此不做介绍。

PandaUI属性 官方ETS属性 参数类型 描述 备注
width width Length 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。
height height Length 设置组件自身的高度,缺省时使用元素自身内容需要的高度。
size size {width?:Length,height?:Length} 设置高宽尺寸。
sizeWidth | size-width size:{width} Length 单独设置size的width值
sizeHeight | size-height size:{height} Length 单独设置size的height值
padding padding {top?: Length,right?: Length,bottom?: Length,left?: Length} | Length 设置内边距属性。参数为Length类型时,四个方向内边距同时生效。 PandaUI中可类似css中根据数位设置四个方位,如:padding:"1 2"则为padding:{top:1,bottom:1,left:2,right:2}
paddingTop | padding-top padding:{top} Length 单独设置padding的top值
paddingBottom | padding-bottom padding:{bottom} Length 单独设置padding的bottom值
paddingLeft | padding-left padding:{left} Length 单独设置padding的left值
paddingRight | padding-right padding:{right} Length 单独设置padding的right值
margin margin {top?: Length,right?: Length,bottom?: Length,left?: Length} | Length 设置外边距属性。参数为Length类型时,四个方向内边距同时生效。 PandaUI中可类似css中根据数位设置四个方位,如:margin:"1 2"则为margin:{top:1,bottom:1,left:2,right:2}
marginTop | margin-top margin:{top} Length 单独设置margin的top值
marginBottom | margin-bottom margin:{bottom} Length 单独设置margin的bottom值
marginLeft | margin-left margin:{left} Length 单独设置margin的left值
marginRight | margin-right margin:{right} Length 单独设置margin的right值
constraintSize | constraint-size constraintSize {minWidth?:Length,maxWidth?: Length,minHeight?:Length,maxHeight?: Length} 设置约束尺寸,组件布局时,进行尺寸范围限制。
minWidth | min-width constraintSize:{minWidth} Length 单独设置constraintSize的minWidth属性 此处命名为兼容css,去除constraintSize
maxWidth | max-width constraintSize:{maxWidth} Length 单独设置constraintSize的maxWidth属性 此处命名为兼容css,去除constraintSize
minHeight | min-height constraintSize:{minHeight} Length 单独设置constraintSize的minHeight属性 此处命名为兼容css,去除constraintSize
maxHeight | max-height constraintSize:{maxHeight} Length 单独设置constraintSize的maxHeight属性 此处命名为兼容css,去除constraintSize
layoutWeight | layout-weight layoutWeight number 容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。 仅在Row/Column/Flex布局中生效
align align Alignment 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。
direction direction Direction 设置元素水平方向的布局,可选值参照Direction枚举说明。
position position {x: Length,y: Length} 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。
positionX | position-x position:{x} Length 单独设置position的x属性
positionY | position-y position:{y} Length 单独设置position的y属性
markAnchor markAnchor {x: Length,y: Length} 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。
markAnchorX | mark-anchor-x markAnchor:{x} Length 单独设置markAnchor的x属性
markAnchorY | mark-anchor-y markAnchor:{y} Length 单独设置markAnchor的y属性
offset offset {x: Length,y: Length} 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。
offsetX | offset-x offset:{x} Length 单独设置offset的x属性
offsetY | offset-y offset:{y} Length 单独设置offset的y属性
aspectRatio | aspect-ratio aspectRatio number 指定当前组件的宽高比。
displayPriority | display-priority displayPriority number 设置当前组件在布局容器中显示的优先级,当父容器空间不足时,低优先级的组件会被隐藏。 仅在Row/Column/Flex(单行)容器组件中生效。
flexBasis | flex-basis flexBasis string | number 此属性所在的组件在Flex容器中主轴方向上基准尺寸
flexGrow | flex-grow flexGrow number Flex容器的剩余空间分配给此属性所在组件的比例。
flexShrink | flex-shrink flexShrink number Flex容器压缩尺寸分配给此属性所在组件的比例。
alignSelf | align-self alignSelf ItemAlign 覆盖Flex布局容器中alignItems默认配置。
border border {width?: Length,color?: Color,radius?: Length,style?: BorderStyle} 边框样式设置接口。 支持以字符串多参数输入方式且以单个空格间隔,一位参数设置width,两位参数依次设置width、color,三位参数依次设置width、style、color,四位参数依次设置width、style、color、radius
borderStyle | border-style border:{style} BorderStyle 单独设置border的style属性 borderStyle枚举: Dotted:“显示为一系列圆点,圆点半径为borderWidth的一半”;Dashed:显示为一系列短的方形虚线;Solid:显示为一条实线。 单独设置后续将支持字符串映射枚举值
borderWidth | border-width border:{width} Length 单独设置border的width属性
borderColor | border-color border:{color} Color 单独设置border的color属性
borderRadius | border-radius border:{radius} Length 单独设置border的radius属性
backgroundColor | background-color backgroundColor Color 设置组件的背景色。
backgroundImage |backgournd-image backgroundImage:{src} src: string 图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。 此处与官方不同的是仅设置src路径,repeat单独设置
backgroundRepeat | background-repeat backgroundImage:{repeat} ImageRepeat 设置背景图片的重复样式,默认不重复 后续做字符串与枚举的映射
backgroundImageSize | background-image-size backgroundImageSize {width?: Length,height?: Length} | ImageSize 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 ImageSize的枚举: Cover:默认值,保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界;Contain:保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内;Auto:保持原图的比例不变。
backgroundImageSizeWidth | background-image-size-width backgroundImageSize:{width} Length 单独设置backgroundImageSize的width参数
backgroundImageSizeHeight | background-image-size-height backgroundImageSize:{height} Length 单独设置backgroundImageSize的height参数
backgroundImagePosition backgroundImagePosition {width?: Length,height?: Length} | Alignment 设置背景图在组件中显示位置。
backgroundImagePositionX | background-image-position-x backgroundImagePosition:{x} Length 单独设置backgroundImagePosition的x属性
backgroundImagePositionY | background-image-position-y backgroundImagePosition:{y} Length 单独设置backgroundImagePosition的y属性
opacity opacity number 元素的不透明度,取值范围为0到1,1表示为不透明,0表示为完全透明
visibility visibility Visibility |string 控制当前组件显示或隐藏。 已根据枚举值做映射。 “show”,“visible”=>Visibility.Visible; “none”=>Visibility.None; “hidden”=>Visibility.Hidden
zIndex | z-index zIndex number 同一容器中兄弟组件显示层级关系,z值越大,显示层级越高。
color |fontColor fontColor Color 设置文本颜色。 将"color"映射至fontColor
fontSize | font-size fontSize Length 设置文本尺寸,Length为number类型时,使用fp单位。
fontStyle | font-style fontStyle FontStyle 设置文本的字体样式 FontStyle的枚举:Normal:标准的字体样式;Italic:斜体的字体样式。
fontWeight | font-weight fontWeight number | FontWeight 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 FontWeight枚举:Lighter:字体较细;Normal:字体粗细正常;Regular:字体粗细正常;Medium:字体粗细适中;Bold:字体较粗;Bolder:字体非常粗。
fontFamily | font-family fontFamily string 设置文本的字体列表。使用多个字体,使用’,'进行分割,优先级按顺序生效。例如:‘Arial, sans-serif’。 ETS暂不支持自定义字体(个人尚未找到实现方式,如有可以私信或评论)

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-28 00:35:03修改
7
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐