Taro 封装箭头组件
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|
| color | 箭头的颜色 | string | #000000 | 否 |
| lineWidth | 箭头线的宽度 | number | 2 | 否 |
| breadth | 箭头的大小 | number | 5 | 否 |
| unfold | 是否展开（多用于下拉框） | boolean | false | 否 |
| fixedAngle | 固定角度（优先级大于unfold） | number | - | 否 |
import { View } from "@tarojs/components"
interface HArrowProps {
color?:string,
lineWidth?:number, // 线的宽度
breadth?:number, // 箭头的大小
unfold?:boolean,
fixedAngle?:number,
}
const HArrow = (props:HArrowProps) => {
const {
color = '#000000',
lineWidth = 2,
breadth = 5,
unfold = false,
fixedAngle
} = props
return (
{
width:`${breadth}px`,
height:`${breadth}px`,
borderTop:`${lineWidth}px ${color} solid`,
borderRight:`${lineWidth}px ${color} solid`,
transform:`rotate(${fixedAngle || (unfold ? -45 : 135)}deg)`,
transition: 'all 1s ease-out'
}}>
)
}
export default HArrow
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
