宜搭零代码配置导航

目录

一、简介

二、效果图

三、使用方法

四、特别说明

五、代码。

一、简介

用链接块和容器简单配置页面导航按钮

通过简单配置即可完成自定义页面或与表单之间的跳转。

二、效果图

三、使用方法

1、复制代码，直接粘贴到表单里即可完成安装。

2、选择链接块，配置跳转链接。当前页面需要单击把是否禁用打开，这样就不跳转了。

 3、选择容器配置自定义样式：可跳转按钮的自定义样式为 usestatus、当前页面按钮的自定义样式为 deadstatus 。复制到容器的自定义样式类即可。

 

四、特别说明

1、此图为一个按钮的结构，有一个链接块，一个容器，一个图标和一个文本组成。

2、图标和文本可以自定义。

 3、高级配置：最外层容器定义了两个按钮的样式，会CSS的可以自己修改。

五、代码。

{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lj4zs8f6","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  margin-bottom: 16px;\n}\n\n.usestatus{\n  padding: 3px;\n  margin-right: 16px;\n  background-color: rgba(0,121,242,0.8);\n  color: #ffffff;\n  border-radius: 5px;\n}\n.deadstatus{\n  padding: 3px;\n  margin-right: 16px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 5px;\n  border-color: rgba(31,56,88,0.1);\n  background-color: rgba(31,56,88,0.1);\n  color: rgba(31,56,88,0.4);\n}","fieldId":"div_lj40l8au","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"LinkBlock","props":{"link":{"type":"page","page":{"label":"首页","value":"FORM-GC9664C1X1NB0BTJBRYGX6481WQS236YSZ4JLC1","formType":"display"},"router":{"type":"JSExpression","value":"this.utils.router","mock":{"type":"JSExpression","value":"this.utils.router"}}},"className":"linkblock_lj4zs8ew","__style__":":root {\n  width: 120px;\n}\n","fieldId":"linkBlock_lj40l8aq","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"usestatus","className":"div_lj4zs8ev","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","fieldId":"div_lj40l8at","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lj4zs8eu","type":{"useType":true,"baseType":"arrow-double-right","iconfontSymbol":"","otherType":"smile"},"__style__":":root {\n  margin-right: 3px;\n}\n","fieldId":"icon_lj40l8as"},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","behavior":"NORMAL","content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"返回首页","type":"i18n"},"__style__":{},"fieldId":"text_lj40l8ar","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]},{"componentName":"LinkBlock","props":{"link":{"type":"page","page":{"label":"首页","value":"FORM-GC9664C1X1NB0BTJBRYGX6481WQS236YSZ4JLC1","formType":"display"},"router":{"type":"JSExpression","value":"this.utils.router","mock":{"type":"JSExpression","value":"this.utils.router"}}},"className":"linkblock_lj4zs8ez","__style__":":root {\n  width: 120px;\n}\n","fieldId":"linkBlock_lj40l8b1","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"usestatus","className":"div_lj4zs8ey","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","fieldId":"div_lj40l8b0","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lj4zs8ex","type":{"useType":true,"baseType":"arrow-double-right","iconfontSymbol":"","otherType":"smile"},"__style__":":root {\n  margin-right: 3px;\n}\n","fieldId":"icon_lj40l8ay"},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","behavior":"NORMAL","content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"跳转页面2","type":"i18n"},"__style__":{},"fieldId":"text_lj40l8az","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]},{"componentName":"LinkBlock","props":{"link":{"type":"page","page":{"label":"当前页面","value":"FORM-GI666T81D3NBH2PR7HP8DDVA0JB03XEYQZ4JLK","formType":"display"},"router":{"type":"JSExpression","value":"this.utils.router","mock":{"type":"JSExpression","value":"this.utils.router"}}},"className":"linkblock_lj4zs8f2","disabled":false,"__style__":":root {\n  width: 120px;\n}\n","fieldId":"linkBlock_lj40l8b5","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"deadstatus","className":"div_lj4zs8f1","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","fieldId":"div_lj40l8b4","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lj4zs8f0","type":{"useType":true,"baseType":"arrow-down","iconfontSymbol":"","otherType":""},"__style__":":root {\n  margin-right: 3px;\n}\n","fieldId":"icon_lj40l8b2"},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","behavior":"NORMAL","content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"当前页面","type":"i18n"},"__style__":{},"fieldId":"text_lj40l8b3","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]},{"componentName":"LinkBlock","props":{"link":{"type":"page","page":{"label":"首页","value":"FORM-GC9664C1X1NB0BTJBRYGX6481WQS236YSZ4JLC1","formType":"display"},"router":{"type":"JSExpression","value":"this.utils.router","mock":{"type":"JSExpression","value":"this.utils.router"}}},"className":"linkblock_lj4zs8f5","disabled":false,"__style__":":root {\n  width: 120px;\n}\n","fieldId":"linkBlock_lj40l8b9","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"usestatus","className":"div_lj4zs8f4","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","fieldId":"div_lj40l8b8","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Icon","props":{"size":"small","className":"icon_lj4zs8f3","type":{"useType":true,"baseType":"arrow-double-right","iconfontSymbol":"","otherType":"smile"},"__style__":":root {\n  margin-right: 3px;\n}\n","fieldId":"icon_lj40l8b6"},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","behavior":"NORMAL","content":{"use":"zh_CN","en_US":"Tips content","zh_CN":"跳转页面4","type":"i18n"},"__style__":{},"fieldId":"text_lj40l8b7","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}]}