通用视图样式
所有视图组件都支持以下通用视图样式。
通用视图样式
| 属性名 | 类型 | 默认值 | 说明 | 示例 |
|---|---|---|---|---|
| backgroundColor | string | '#000000' | 背景色 | backgroundColor: '#FF0000' | '#FF000080' | 'linear-gradient(90deg #FF000080 #00FF0080)' |
| backgroundImage | string | 背景图片 | 同 Image 组件 的src属性 | |
| boxSizing | string | 'none' | 盒模型模式 | boxSizing: 'none' | 'border-box' |
| borderStyle | string | 'solid' | 四个边的边框类型 | borderStyle: 'none' | 'solid' | 'dashed' | 'dotted' |
| borderLeftStyle | string | 'solid' | 左边框类型 | borderLeftStyle: 'none' | 'solid' | 'dashed' | 'dotted' |
| borderTopStyle | string | 'solid' | 上边框类型 | borderTopStyle: 'none' | 'solid' | 'dashed' | 'dotted' |
| borderRightStyle | string | 'solid' | 右边框类型 | borderRightStyle: 'none' | 'solid' | 'dashed' | 'dotted' |
| borderBottomStyle | string | 'solid' | 下边框类型 | borderBottomStyle: 'none' | 'solid' | 'dashed' | 'dotted' |
| borderColor | string | '#00000000' | 四个边的边框颜色 | borderColor: '#000000' |
| borderLeftColor | string | '#00000000' | 左边框颜色 | borderLeftColor: '#000000' |
| borderTopColor | string | '#00000000' | 上边框颜色 | borderTopColor: '#000000' |
| borderRightColor | string | '#00000000' | 右边框颜色 | borderRightColor: '#000000' |
| borderBottomColor | string | '#00000000' | 下边框颜色 | borderBottomColor: '#000000' |
| borderWidth | number|string | 0 | 四个边的边框宽度 | borderWidth: 10 | '10px' |
| borderLeftWidth | number|string | 0 | 左边框宽度 | borderLeftWidth: 10 | '10px' |
| borderTopWidth | number|string | 0 | 上边框宽度 | borderTopWidth: 10 | '10px' |
| borderRightWidth | number|string | 0 | 右边框宽度 | borderRightWidth: 10 | '10px' |
| borderBottomWidth | number|string | 0 | 下边框宽度 | borderBottomWidth: 10 | '10px' |
| borderRadius | number|string | 0 | 四个角的边框圆角半径 | borderRadius: 10 | '10px' |
| borderTopLeftRadius | number|string | 0 | 左上角边框圆角半径 | borderTopLeftRadius: 10 | '10px' |
| borderTopRightRadius | number|string | 0 | 右上角边框圆角半径 | borderTopRightRadius: 10 | '10px' |
| borderBottomLeftRadius | number|string | 0 | 左下角边框圆角半径 | borderBottomLeftRadius: 10 | '10px' |
| borderBottomRightRadius | number|string | 0 | 右下角边框圆角半径 | borderBottomRightRadius: 10 | '10px' |
| shadow | string | 控件阴影（属性分别为：水平偏移量，垂直偏移量，模糊度，颜色） | shadow: '5px 5px 10px #000000' | |
| opacity | number | 1 | 透明度 | opacity: 0.5 |
| visibility | string | 'visible' | 控件是否显示（'hidden'为不显示，但会参与布局） | visibility: 'hidden' | 'visible' |
| zIndex | number | 0 | 控件z轴层级 | zIndex: 1 |
| transform | string | 元素变换 | transform: 'translate(100,100),scale(0.5),rotateZ(30)' |
动画（过渡效果）相关样式
| 属性名 | 类型 | 默认值 | 说明 | 示例 |
|---|---|---|---|---|
| transitionProperty | string | 过渡效果的属性名称 | transitionProperty: 'transform, backgroundColor' | |
| transitionDuration | number | 0 | 过渡效果持续时间（单位：秒） | transitionDuration: '2, 2' |
| transitionDelay | number | 0 | 过渡效果延时时间（单位：秒） | transitionDelay: 2 |
| transitionTimingFunction | string | 'ease' | 过渡效果的运动速率曲线 | transitionTimingFunction: 'linear' linear: 线性运动 ease: 先加速后减速（结束时会特别慢） ease-in: 加速运动 ease-out: 减速运动 ease-in-out: 先加速后减速 |
示例
js
let animView = new View();
// 设置style，指定transition过度动画属性
animView.style = {
width: 100,
height: 100,
opacity: 0.5,
backgroundColor: "#00ff00",
transitionDelay: 0.1,
transitionProperty: 'transform, backgroundColor, opacity',
transitionDuration: '2, 3, 3',
transitionTimingFunction: 'ease-in',
};
// 修改style，触发动画，因为transitionProperty没有指定width、height，所以width、height不会触发过度动画
animView.style = {
width: 50,
height: 50,
opacity: 1,
backgroundColor: "#eb4034",
transform: 'translate(100,100), scale(0.5), rotateZ(30), skew(30,30)',
}