2.0.10 • Published 1 year ago
taro-linear-gradient v2.0.10
线性渐变区域
功能说明
线性渐变区域，可以作为背景或者半透明遮罩等
截图
支持渠道
✅ 已支持 🔶 部分支持 ❌ 尚未支持 🚫 不能支持 🚚 开发中 ❓ 尚未验证
| RN | WXAPP | ALIAPP | TT | H5 | H5_WX | H5_ALIPAY | H5_SuperAPP |
|---|---|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
示例+说明
...
import CptLinearGradient from '@/cptLinearGradient'
const colors = [{color: '#ff6955', opacity:1}, { color: '#32cd32',opacity: 0.5 }, { color: '#708090',opacity: 0.5 }, { color: '#00ffff',opacity: 0.5 }]
...
<CptLinearGradient
style={{ width: Taro.pxTransform(400), height: Taro.pxTransform(200)}}
startColor='red'
endColor='#00FF00'
rotate={45}
startOpacity={0.5}
colors={colors}
/>参数
| APIs | 说明 | 是否必须 | 默认 |
|---|---|---|---|
| style | 样式 | 否 | |
| rotate | 旋转(默认从上到下，取值范围0,360) | 否 | 0 |
| startColor | 起始颜色 (支持 white 和#FFFFFF) | 否 | #ffffff |
| endColor | 结束颜色 (支持 white 和#FFFFFF) | 否 | #ffffff |
| startOpacity | 起始透明度 | 否 | 0 |
| endOpacity | 结束透明度 | 否 | 1 |
| colors | 多个渐变色设置 | 否 | [] |
colors
| colors | 说明 | 是否必须 | 默认 |
|---|---|---|---|
| color | 颜色 | 是 | |
| opacity | 透明度 | 是 | 1 |
| offset | 偏移量 【0-100%】 | 否 | 默认按照 color 数量平分 |
注意
- 在 rn 端，修改组件属性不会更新本组件，请使用 key 值来强制更新本组件
- startColor, endColor 与 colors 属性只能提供一种，同时提供会以 colors 属性为准
- offset 要么全部设置, 要么全部不设置