@gizwits/vantui
Version:
机智云组件库
81 lines • 2.15 kB
JavaScript
import { View, Text } from '@tarojs/components';
import { createStyles } from '../utils/styles';
import { Icon } from '../icon';
import { Slider } from '../slider';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var defaultIcon = 'https://goms-1251025085.cos.ap-guangzhou.myqcloud.com/%E8%B6%85%E8%B5%9B%E6%A8%A1%E7%89%88%E7%BC%96%E8%BE%91%E5%99%A8/setting.png';
export function NumberItem(props) {
var icon = props.icon,
title = props.title,
value = props.value,
_onChange = props.onChange,
min = props.min,
max = props.max,
step = props.step,
unit = props.unit;
return /*#__PURE__*/_jsxs(View, {
style: styles.container,
children: [/*#__PURE__*/_jsxs(View, {
style: styles.l1,
children: [/*#__PURE__*/_jsx(Icon, {
name: icon !== null && icon !== void 0 ? icon : defaultIcon,
size: 48
}), /*#__PURE__*/_jsx(Text, {
style: {
marginLeft: 8
},
children: title
}), /*#__PURE__*/_jsx(Text, {
style: {
color: '#418AF3',
marginLeft: 8
},
children: value
}), unit && /*#__PURE__*/_jsx(Text, {
style: {
marginLeft: 8
},
children: unit
})]
}), /*#__PURE__*/_jsx(View, {
style: styles.sliderWapper,
children: /*#__PURE__*/_jsx(Slider, {
barHeight: '10px',
activeColor: '#418AF3',
value: value,
min: min,
max: max,
step: step !== null && step !== void 0 ? step : 1,
onChange: function onChange(e) {
_onChange(e.detail);
}
})
})]
});
}
export default NumberItem;
var styles = createStyles({
container: {
height: 80,
width: '100%',
display: 'flex',
backgroundColor: '#fff',
borderRadius: 4,
flexDirection: 'column',
justifyContent: 'space-evenly'
},
l1: {
width: '100%',
height: 20,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginLeft: 8,
marginTop: 4
},
sliderWapper: {
width: '92%',
marginLeft: '4%'
}
});