0.0.1 • Published 4 months ago
@zym-com/progress-basic v0.0.1
Install
npm install @zym-com/progress-basicor
yarn add @zym-com/progress-basicBasic Usage
import ProgressBasic from "@zym-com/progress-basic";
import "@zym-com/progress-basic/dist/style.css";
function App() {
const options = {
"configuration": {
"data": {
"globalConfig.labelBarlayout": "labelL",
"globalConfig.proBarAnimation": true,
"globalConfig.proBarAnimationTime": 2,
"progressBar.leftProBarShow": true,
"leftproBarBgConfig.proDirection": "horizontal",
"leftproBarBgConfig.barWidthHeight": {
"w": "82%",
"h": "15px"
},
"leftproBarBgConfig.barVerWidthHeight": {
"h": "82%",
"w": "15px"
},
"leftproBarBgConfig.barMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftproBarBgConfig.barPadding": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftproBarBgConfig.leftProBarColorSelect": "gradientBgColor",
"leftproBarBgConfig.leftProBarSolidBgColor": "rgba(9, 40, 67, 0.3)",
"leftproBarBgConfig.leftProBarAnamorphism": {
"type": "gradient",
"pure": "rgba(4, 24, 51, 0.45)",
"gradient": {
"stops": [
{
"offset": 0,
"color": "rgba(4, 24, 51, 0.45)"
},
{
"offset": 100,
"color": " rgba(0, 247, 255, 0.9)"
}
],
"angle": 90,
"direction": "linear"
}
},
"leftproBarBgConfig.leftProBarBgimage": "",
"leftproBarBgConfig.leftProBarImageSize": "cover",
"leftproBarBgConfig.leftProBarOpacity": 1,
"leftproBarBgConfig.leftproBarborderRidius": "10px",
"proBarBgConfig.bgColorSelect": "solidBgColor",
"proBarBgConfig.solidBgColor": "rgba(30, 95, 180, 0.4)",
"proBarBgConfig.anamorphism": {
"type": "gradient",
"pure": "rgba(4, 24, 51, 0.45)",
"gradient": {
"stops": [
{
"offset": 0,
"color": "rgba(4, 24, 51, 0.45)"
},
{
"offset": 100,
"color": "rgba(14, 173, 255, 0.9)"
}
],
"angle": 90,
"direction": "linear"
}
},
"proBarBgConfig.proBarBgimage": "",
"proBarBgConfig.imageSize": "cover",
"proBarBgConfig.proBarBgTransparency": 1,
"proBarBgConfig.borderRidius": "10px",
"proBarBorderConfig.borderStyle": "none",
"proBarBorderConfig.borderWidth": 1,
"proBarBorderConfig.borderColor": "rgba(26,246,254,1)",
"leftproBarNodeConfig.leftproBarNodeWH": {
"w": "40px",
"h": "40px"
},
"leftproBarNodeConfig.leftproBarNodePosition": "-15px",
"leftproBarNodeConfig.leftproBarNodebgColorSelect": "BgImage",
"leftproBarNodeConfig.leftproBarNodesolidBgColor": "rgba(0,246,255,1)",
"leftproBarNodeConfig.leftproBarNodeanamorphism": {
"type": "gradient",
"pure": "rgba(255,68,68,1)",
"gradient": {
"stops": [
{
"offset": 0,
"color": "rgba(255,68,68,1)"
},
{
"offset": 100,
"color": "rgba(0,0,0,1)"
}
],
"angle": 180,
"direction": "linear"
}
},
"leftproBarNodeConfig.leftproBarNodeproBarBgDefaultImg": true,
"leftproBarNodeConfig.leftproBarNodeproBarBgimage": "",
"leftproBarNodeConfig.leftproBarNodeimageSize": "cover",
"leftproBarNodeConfig.leftproBarNodeTransparency": 1,
"leftproBarNodeConfig.leftproBarNodeRidius": 50,
"lrLabel.leftShow": true,
"lrLabel.leftWidth": "15",
"lrLabel.Leftlayout": "imgL",
"lrLabel.leftMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftLabelImgConfig.leftDefaultImg": true,
"leftLabelImgConfig.LeftImage": "",
"leftLabelImgConfig.LeftImgWidth": {
"w": 12,
"h": 20
},
"leftLabelImgConfig.LeftLabelImgMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"leftLabelImgConfig.LeftRidius": 0,
"leftLabelText.LeftLabelTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"leftLabelText.LeftLabelMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 5
},
"leftLabelText.LeftLabelTranslate": {
"x": 0,
"y": 0
},
"leftLabelValueText.LeftLabelValueTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"leftLabelValueText.LeftLabelValueMaigin": {
"t": 0,
"r": 5,
"b": 0,
"l": 5
},
"leftLabelValueText.LeftLabelValueTranslate": {
"x": 0,
"y": 0
},
"leftLabelValueText.LeftLabelPerCent": true,
"LeftLabelPerCentStyle.LeftLabelPerCentFollow": true,
"LeftLabelPerCentStyle.LeftLabelPerCentTextStyle": {
"fontFamily": "DIN",
"fontSize": 16,
"color": "rgba(255,255,255,1)",
"fontWeight": "bold",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"LeftLabelPerCentStyle.LeftLabelPerCentMaigin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
}
},
"group": {
"root": {
"globalConfig": {
"displayName": "全局",
"show": true
},
"progressBar": {
"displayName": "进度条",
"show": true
},
"lrLabel": {
"displayName": "标签",
"show": true
}
},
"leftproBarBgConfig_children.leftproBarBgConfig": {
"leftproBarBgConfig": {
"displayName": "进度条配置",
"show": true
}
},
"leftproBarBgConfig_children.leftproBarNodeConfig": {
"leftproBarNodeConfig": {
"displayName": "进度条节点",
"show": true,
"icon": true
}
},
"proBarChildren.proBarBgConfig": {
"proBarBgConfig": {
"displayName": "背景",
"show": true
}
},
"proBarChildren.proBarBorderConfig": {
"proBarBorderConfig": {
"displayName": "边框",
"show": true
}
},
"leftLabelTypeChildren.leftLabelImgConfig": {
"leftLabelImgConfig": {
"displayName": "图片",
"show": true,
"icon": true
}
},
"leftLabelTypeChildren.leftLabelText": {
"leftLabelText": {
"displayName": "标签",
"show": true,
"icon": true
}
},
"leftLabelTypeChildren.leftLabelValueText": {
"leftLabelValueText": {
"displayName": "值",
"show": true,
"icon": true
}
},
"LeftLabelPerCentChildren.LeftLabelPerCentStyle": {
"LeftLabelPerCentStyle": {
"displayName": "百分号样式",
"show": true
}
}
}
},
"base": {
"width": 528,
"height": 200
},
"dataSource": [
{
"label": "男",
"value": 20,
"image": ""
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<ProgressBasic {...options} />
</>
);
}