JS应用框架文档

# 通用样式

通用样式，即所有组件都可以支持的样式

它们均与 css 的属性样式用法保持一致，开发者可写在内联样式或 style 标签里，实现组件样式的定制化

名称 类型 默认值 描述
width <length>|<percentage> 0 设置组件自身的宽度。
未设置时组件宽度默认为0。
height <length>|<percentage> - 设置组件自身的高度。部分组件未设置时会默认为0
padding <length> 0 使用简写属性设置所有的内边距属性。
margin <length> 0 使用简写属性设置所有的外边距属性。
margin-[left|top|right|bottom] <length> 0 设置左、上、右、下外边距属性。
border-width <length> 0 使用简写属性设置元素的所有边框宽度。
border-color <color> black 使用简写属性设置元素的所有边框颜色。
border-radius <length> - border-radius属性是设置元素的外边框圆角半径。
border-[top|bottom]-[left|right]-radius <length> - 设置四个角的圆角弧度。
background-color <color> - 设置背景颜色。
background-image <uri> - 设置背景图片。
background-size contain | cover | auto | <length> | <percentage> - 设置背景图片大小。
background-repeat repeat | no-repeat repeat 设置是否及如何重复绘制背景图像。
background-position <length> | <percentage> | left | right | top | bottom | center 0px 0px 设置背景图片在容器中绘制的位置。
display string flex 确定一个元素所产生的框的类型，可选值为：
flex：弹性布局。
none：不渲染此元素。
position fixed|absolute|relative - 规定元素的定位类型
[left|top|right|bottom] <length> - 一般配合fixed或absolute布局使用

说明

通用样式不是必填项，但是宽高如果未设置时为0，组件不会渲染出来。

目前，样式支持颜色格式如下：

  • rgb(255, 255, 255)
  • rgba(255, 255, 255, 1.0)
  • HEX格式：#rrggbb
  • 枚举格式：black，white等。Script脚本中不支持枚举格式。

# 动画样式

WARNING

动画存在问题，会导致元素错位，请暂时先用帧动画组件代替

组件普遍支持的可以在style或css中设置的动态的平移效果。

名称 类型 默认值 描述
transform string - 详见表1。
animation-name string - 指定@keyframes，详见表2。
animation-delay <time> 0 定义动画播放的延迟时间。
支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
animation-duration <time> 0 定义一个动画周期。
支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。
动画周期最大值为60s。
animation-duration 样式必须设置，否则时长为 0，则不会播放动画。
animation-iteration-count number | infinite 1 定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。
animation-timing-function string linear 描述动画执行的速度曲线，用于使动画更为平滑。可选项有：
linear：表示动画从头到尾的速度都是相同的。
ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
animation-fill-mode string none 指定动画执行结束后的状态。可选项有：
none：恢复初始状态。
forwards：保持动画结束时的状态（在最后一个关键帧中定义）。

表1 transform操作说明

名称 类型 描述
translateX <length> X轴方向平移动画属性
translateY <length> Y轴方向平移动画属性

表2 @keyframes属性说明

名称 类型 默认值 描述
background-color <color> - 动画执行后应用到组件上的背景颜色。
width <length> - 动画执行后应用到组件上的宽度值。
height <length> - 动画执行后应用到组件上的高度值。
transform string - 定义应用在组件上的变换类型

对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例：

@keyframes Go
{
     from {
         background-color: #f76160;
     }
     to {
         background-color: #09ba07;
     }
}

← div →