@zym-com/menu-basic
v0.0.1
Published
基础菜单
Downloads
2
Readme
Install
npm install @zym-com/menu-basicor
yarn add @zym-com/menu-basicBasic Usage
import MenuBasic from "@zym-com/menu-basic";
import "@zym-com/menu-basic/dist/style.css";
function App() {
const options = {
"configuration": {
"sidebarPadding": {
"t": 50,
"r": 5,
"b": 0,
"l": 0
},
"sidebarMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"sidebarBgColorSelect": "solidBgColor",
"sidebarBgColor": "rgba(24, 144, 255,0.15)",
"sidebarBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"sidebarBgimage": "",
"sidebarBgimageSize": "cover",
"sidebarBgtransparency": 1,
"sidebarBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"sidebarBorderStyle": "solid",
"sidebarBorderWidth": 2,
"sidebarBorderColor": "rgba(24, 144, 255,1)",
"sidebarBorderRadius": 0,
"downIconPosition": {
"x": "20px",
"y": 50
},
"downIconType": "default",
"downIconSize": 5,
"downIconImage": "",
"downIconWidth": 2,
"downIconColor": "rgba(179,184,212,1)",
"scrollbarWidth": 4,
"scrollbarColor": "rgba(255,255,255,0)",
"scrollbarRadius": 10,
"scrollbarThumbColor": "rgba(76,76,76,1)",
"scrollbarThumbRadius": 10,
"mutualExclusion": false,
"excludeParent": true,
"fristNodeBgColorSelect": "solidBgColor",
"fristNodeBgColor": "rgba(95, 144, 186,1)",
"fristNodeBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"fristNodeBgimage": "",
"fristNodeBgimageSize": "cover",
"fristNodeBgtransparency": 1,
"fristNodeBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"fristNodeBorderStyle": "solid",
"fristNodeBorderWidth": 2,
"fristNodeBorderColor": "rgba(24, 144, 255,1)",
"fristNodeBorderRadius": 0,
"childNodeBgColorSelect": "solidBgColor",
"childNodeBgColor": "rgba(24, 144, 255,0.15)",
"childNodeBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"childNodeBgimage": "",
"childNodeBgimageSize": "cover",
"childNodeBgtransparency": 1,
"childNodeBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"childNodeBorderStyle": "solid",
"childNodeBorderWidth": 2,
"childNodeBorderColor": "rgba(24, 144, 255,1)",
"childNodeBorderRadius": 0,
"searchInputShow": true,
"searchInputFixed": true,
"searchInputPosition": {
"x": 0,
"y": 0
},
"searchInputSize": {
"x": 200,
"y": 40
},
"searchInputtextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 15,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 2,
"fontStyle": "normal"
},
"searchInputlevelalignment": "left",
"searchInputvaluePadding": {
"l": 8,
"r": 0
},
"searchInputbgColorSelect": "solidBgColor",
"searchInputsolidBgColor": "rgba(24, 144, 255,0.15)",
"searchInputanamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"searchInputimage": "",
"searchInputimageSize": "cover",
"searchInputborderRadiusName": 5,
"searchInputtransparency": 1,
"searchInputBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"searchInputborderStyle": "solid",
"searchInputborderWidthName": 2,
"searchInputborderColor": "rgba(24, 144, 255,1)",
"searchInputplaceholderValue": "请输入",
"searchInputplaceholderTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 15,
"color": "rgba(255,255,255,0.3)",
"fontWeight": "normal",
"letterSpacing": 2,
"fontStyle": "normal"
},
"searchInputshadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"searchInputclickTrigger": true,
"searchInputvalueTrigger": false,
"searchInputblurTrigger": true,
"searchInputsearchBtnWH": {
"W": 60,
"H": 40
},
"searchInputsearchBtnRT": {
"R": -65,
"T": 50
},
"searchInputsearchBtnBgStype": "solidBgColor",
"searchInputsearchBtnBgColor": "rgba(24, 144, 255,0.15)",
"searchInputsearchBtnBgImage": "",
"searchInputsearchBtnBorderRadius": 5,
"searchInputsearchBtnType": "solidBgColor",
"searchInputsearchBtnText": "搜索",
"searchInputsearchBtnTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 15,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 2,
"fontStyle": "normal"
},
"searchInputsearchBtnImage": "",
"searchInputsearchBtnImgWH": {
"W": 30,
"H": 30
},
"searchSelectBgColorSelect": "solidBgColor",
"searchSelectBgColor": "rgba(95, 144, 186,0.5)",
"searchSelectBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"searchSelectBgimage": "",
"searchSelectBgimageSize": "cover",
"searchSelectBgtransparency": 1,
"searchSelectBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"searchSelectBorderStyle": "solid",
"searchSelectBorderWidth": 2,
"searchSelectBorderColor": "rgba(24, 144, 255,1)",
"searchSelectBorderRadius": 0,
"levelDataSeries": [
{
"levelNumber": 1,
"levelPaddingLeft": 15,
"levelMarginBottom": 5,
"levelBgColorSelect": "solidBgColor",
"levelBgColor": "rgba(24, 144, 255,0.15)",
"levelBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"levelBgimage": "",
"levelBgimageSize": "cover",
"levelOpacity": 1,
"levelBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"levelBorderStyle": "solid",
"levelBorderWidth": 2,
"levelBorderColor": "rgba(24, 144, 255,1)",
"levelBorderRadius": 0,
"levelbgStyleChild": false,
"levelBorderStyleChild": false
},
{
"levelNumber": 2,
"levelPaddingLeft": 30,
"levelMarginBottom": 5,
"levelBgColorSelect": "solidBgColor",
"levelBgColor": "rgba(24, 144, 255,0.15)",
"levelBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"levelBgimage": "",
"levelBgimageSize": "cover",
"levelOpacity": 1,
"levelBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"levelBorderStyle": "solid",
"levelBorderWidth": 2,
"levelBorderColor": "rgba(24, 144, 255,1)",
"levelBorderRadius": 0,
"levelbgStyleChild": false,
"levelBorderStyleChild": false
},
{
"levelNumber": 3,
"levelPaddingLeft": 40,
"levelMarginBottom": 5,
"levelBgColorSelect": "solidBgColor",
"levelBgColor": "rgba(24, 144, 255,0.15)",
"levelBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"levelBgimage": "",
"levelBgimageSize": "cover",
"levelOpacity": 1,
"levelBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"levelBorderStyle": "solid",
"levelBorderWidth": 2,
"levelBorderColor": "rgba(24, 144, 255,1)",
"levelBorderRadius": 0,
"levelbgStyleChild": false,
"levelBorderStyleChild": false
},
{
"levelNumber": 4,
"levelPaddingLeft": 50,
"levelMarginBottom": 5,
"levelBgColorSelect": "solidBgColor",
"levelBgColor": "rgba(24, 144, 255,0.15)",
"levelBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"levelBgimage": "",
"levelBgimageSize": "cover",
"levelOpacity": 1,
"levelBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"levelBorderStyle": "solid",
"levelBorderWidth": 2,
"levelBorderColor": "rgba(24, 144, 255,1)",
"levelBorderRadius": 0,
"levelbgStyleChild": false,
"levelBorderStyleChild": false
}
],
"dataSourceSeries": [
{
"fildType": "global",
"accurateMatching": true,
"fildValue": {
"field": "",
"value": ""
},
"numericField": "value",
"valueRange": {
"min": "0",
"max": "100"
},
"domContainerSize": {
"x": "100",
"y": "40px"
},
"bgColorSelect": "solidBgColor",
"solidBgColor": "rgba(24, 144, 255,0.15)",
"bgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"bgimage": "",
"bgimageSize": "cover",
"bgtransparency": 1,
"domBorderGroup": [
"top",
"right",
"bottom",
"left"
],
"borderStyle": "solid",
"borderWidth": 2,
"borderColor": "rgba(24, 144, 255,1)",
"bgborderRadius": 0,
"menuIconSize": {
"x": 20,
"y": 20
},
"menuIconMl": 10,
"menuIconImage": "",
"contentSeries": [
{
"domType": "text",
"getValueType": "dataSource",
"contentMapping": "name",
"contentText": "name",
"contentImage": "",
"contentVideo": {
"url": ""
},
"domSize": {
"x": "80%",
"y": "auto"
},
"domItemPosition": {
"x": "10px",
"y": "50%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255,255,255,1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "left",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"htmlTemplate": "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
"htmlCss": ".box {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column-reverse;\r\n position: relative\r\n}\r\n\r\n.title {\r\n font-size: 16px;\r\n font-family: Microsoft YaHei;\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n margin-top: 45px;\r\n margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n font-size: 24px;\r\n font-family: DIN;\r\n font-weight: bold;\r\n color: #FFB00E;\r\n}\r\n\r\n.img {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 90px;\r\n height: 50px;\r\n transform: translate(-50%, -20%)\r\n}",
"textShadow": false
}
],
"backgroundStyleChild": true,
"borderStyleChild": false,
"menuIconStyleChild": false
}
],
"sidebarBgFill": false,
"downIconConfig": true,
"scrollbarStyle": true,
"fristNodeConfig": true,
"childNodeConfig": false,
"sidebarbgStyleChild": false,
"sidebarBorderStyleChild": false,
"fristNodebgStyleChild": true,
"fristNodeBorderStyleChild": false,
"childNodebgStyleChild": true,
"childNodeBorderStyleChild": false,
"searchSelectConfig": true,
"searchInputbackgroundStyleChild": true,
"searchInputborderStyleChild": false,
"searchInputplaceholderStyleChild": true,
"searchInputtextShadowChild": false,
"searchInputsearchBtnChild": true,
"searchInputsearchBtnBgStyle": true,
"searchInputsearchBtnContent": true,
"searchSelectbgStyleChild": true,
"searchSelectBorderStyleChild": false
},
"base": {
"width": 270,
"height": 500
},
"dataSource": [
{
"name": "一级1",
"parentName": "",
"value": "1"
},
{
"name": "一级2",
"parentName": "",
"value": "2"
},
{
"name": "一级3",
"parentName": "",
"value": "3"
},
{
"name": "一级4",
"parentName": "",
"value": "4"
},
{
"name": "一级5",
"parentName": "",
"value": "5"
},
{
"name": "一级6",
"parentName": "",
"value": "6"
},
{
"name": "一级7",
"parentName": "",
"value": "7"
},
{
"name": "一级8",
"parentName": "",
"value": "8"
},
{
"name": "一级9",
"parentName": "",
"value": "9"
},
{
"name": "一级10",
"parentName": "",
"value": "10"
},
{
"name": "二级1-1",
"parentName": "一级1",
"value": "11"
},
{
"name": "二级1-2",
"parentName": "一级1",
"value": "12"
},
{
"name": "二级1-3",
"parentName": "一级1",
"value": "13"
},
{
"name": "二级1-4",
"parentName": "一级1",
"value": "14"
},
{
"name": "二级1-5",
"parentName": "一级1",
"value": "15"
},
{
"name": "二级1-6",
"parentName": "一级1",
"value": "16"
},
{
"name": "二级1-7",
"parentName": "一级1",
"value": "17"
},
{
"name": "三级1-1-1",
"parentName": "二级1-1",
"value": "18"
},
{
"name": "三级1-1-2",
"parentName": "二级1-2",
"value": "19"
},
{
"name": "三级1-1-3",
"parentName": "二级1-3",
"value": "20"
},
{
"name": "四级1-1-101",
"parentName": "三级1-1-1",
"value": "30"
},
{
"name": "二级2-1",
"parentName": "一级2",
"value": "21"
},
{
"name": "二级3-1",
"parentName": "一级3",
"value": "22"
},
{
"name": "二级4-1",
"parentName": "一级4",
"value": "23"
},
{
"name": "二级5-1",
"parentName": "一级5",
"value": "24"
},
{
"name": "二级6-1",
"parentName": "一级6",
"value": "25"
},
{
"name": "二级7-1",
"parentName": "一级7",
"value": "26"
},
{
"name": "二级8-1",
"parentName": "一级8",
"value": "27"
},
{
"name": "二级9-1",
"parentName": "一级9",
"value": "28"
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<MenuBasic {...options} />
</>
);
}