0.0.1 • Published 4 months ago
@zym-com/progress-horizontal v0.0.1
Install
npm install @zym-com/progress-horizontalor
yarn add @zym-com/progress-horizontalBasic Usage
import ProgressHorizontal from "@zym-com/progress-horizontal";
import "@zym-com/progress-horizontal/dist/style.css";
function App() {
const options = {
"configuration": {
"proBarAnimation": true,
"proBarAnimationTime": 2,
"barWidthHeight": {
"w": 70,
"h": "18px"
},
"barMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"barPadding": {
"t": 2,
"r": 2,
"b": 2,
"l": 2
},
"proBarType": "left",
"bgColorSelect": "solidBgColor",
"solidBgColor": "rgba(9, 40, 67, 0.3)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"proBarBgimage": "",
"imageSize": "cover",
"proBarBgTransparency": 1,
"borderRidius": 0,
"borderStyle": "solid",
"borderWidth": 1,
"borderColor": "rgba(26,246,254,1)",
"leftProBarShow": true,
"leftProBarMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftProBarColorSelect": "gradientBgColor",
"leftProBarSolidBgColor": "rgba(9, 40, 67, 0.3)",
"leftProBarAnamorphism": {
"startVal": "rgba(20,34,47,1)",
"endVal": "rgba(0,246,255,1)",
"direction": 90
},
"leftProBarBgimage": "",
"leftProBarImageSize": "cover",
"leftProBarOpacity": 1,
"leftproBarborderRidius": 0,
"leftproBarNodeWH": {
"w": "25px",
"h": "25px"
},
"leftproBarNodePosition": -15,
"leftproBarNodebgColorSelect": "solidBgColor",
"leftproBarNodesolidBgColor": "rgba(0,246,255,1)",
"leftproBarNodeanamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"leftproBarNodeproBarBgimage": "",
"leftproBarNodeimageSize": "cover",
"leftproBarNodeTransparency": 1,
"leftproBarNodeRidius": 50,
"rightProBarShow": true,
"rightProBarMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightProBarColorSelect": "gradientBgColor",
"rightProBarSolidBgColor": "rgba(9, 40, 67, 0.3)",
"rightProBarAnamorphism": {
"startVal": "rgba(13, 31, 44, 0.45)",
"endVal": "rgba(165, 141, 217, 0.9)",
"direction": 90
},
"rightProBarBgimage": "",
"rightProBarImageSize": "cover",
"rightProBarOpacity": 1,
"rightproBarborderRidius": 0,
"rightproBarNodeWH": {
"w": "25px",
"h": "25px"
},
"rightproBarNodePosition": 0,
"rightproBarNodebgColorSelect": "solidBgColor",
"rightproBarNodesolidBgColor": "rgba(165,141,217,1)",
"rightproBarNodeanamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"rightproBarNodeproBarBgimage": "",
"rightproBarNodeimageSize": "cover",
"rightproBarNodeTransparency": 1,
"rightproBarNodeRidius": 50,
"lrLabelType": "left",
"leftShow": true,
"leftWidth": "20",
"Leftlayout": "imgL",
"leftDefaultImg": true,
"LeftImage": "",
"LeftImgWidth": {
"w": 12,
"h": 20
},
"LeftLabelImgMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"LeftRidius": 0,
"LeftLabelTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 5
},
"LeftLabelTranslate": {
"x": 0,
"y": 0
},
"LeftLabelValueTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelValueMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 5
},
"LeftLabelValueTranslate": {
"x": 0,
"y": 0
},
"LeftLabelPerCent": true,
"LeftLabelPerCentFollow": true,
"LeftLabelPerCentTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelPerCentMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightShow": true,
"rightWidth": "20",
"rightlayout": "imgR",
"rightDefaultImg": true,
"rightImage": "",
"rightImgWidth": {
"w": 12,
"h": 20
},
"rightLabelImgMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"rightRidius": 0,
"rightLabelTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"rightLabelTranslate": {
"x": 0,
"y": 0
},
"rightLabelValueTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelValueMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 5
},
"rightLabelValueTranslate": {
"x": 0,
"y": 0
},
"rightLabelPerCent": true,
"rightLabelPerCentFollow": true,
"rightLabelPerCentTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"rightLabelPerCentMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftproBarNodeConfig": false,
"rightproBarNodeConfig": false,
"leftLabelImgConfig": true,
"leftLabelText": true,
"leftLabelValueText": true,
"rightLabelImgConfig": true,
"rightLabelText": true,
"rightLabelValueText": true
},
"base": {
"width": 528,
"height": 200
},
"dataSource": [
{
"leftLabel": "男",
"leftValue": 20,
"leftImage": "",
"rightLabel": "女",
"rightValue": 80,
"rightImage": ""
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<ProgressHorizontal {...options} />
</>
);
}