[{"id":"cf9e6fa8-0b86-49e2-ac68-07594c7af412","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d3324a01-b600-4674-8aee-dac1f6640ec9","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3e247fcf-cdb2-4f60-a969-1498a5bfdb2d","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"f8fae864-8593-4474-a823-ae63aa34f17c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"931caca9-ac3f-4fb9-bd21-c561b8f4c131","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"31b37c80-894c-4ddb-8445-0ddb77116ebf","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"7827c267-c18d-4225-a98a-69abc788f00d","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"75958fc3-b020-4620-a44c-34e00d53c6ab","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8cdb3b7d-dca1-4490-bebc-d8faa2998eb4","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"94d72550-4999-4422-aaa0-0a149d42e4fd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"087e3f2a-f18d-4838-a51d-1d98539c8b0f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"0d8daadd-44fb-4e7d-bfae-d7e3c494fbdc","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4100a562-8227-463d-8cd7-a86c028c7980","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"967ee563-9ecf-44e2-99a4-e91fe8dbc722","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ad4c4887-a925-4aa3-a65c-6988bbc71603","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"282ed04c-5f92-4348-a82e-125448d5c70e","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3ca1ce65-7f2e-4b1b-8846-361962f50ed0","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"e1fb1b27-6f94-4100-bb0e-7b43d63781eb","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9a39e982-c66b-489e-b0e1-bfa1bcd15a70","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"274f82b6-deda-49dc-8487-95028b51195c","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5c518362-9fbf-484c-80ef-72d2ec815c2d","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"53d6e6ad-c925-491c-9faa-0f374d8904e0","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"1d5eb6c4-41cd-4121-8273-c8555932ed35","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"7e47a724-c7be-464b-bf41-6c8844499cd1","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"207aa98c-0f41-4b44-95a5-cd18c154c79d","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b033909b-d5a9-448e-9238-a044d0c6c062","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9478d8b4-6bd7-4049-ad88-54593e69123c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"beb379f4-f287-49b1-9c9b-a396e6c04a2d","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3f2daab3-114b-41f3-916f-b2df9f377634","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"240b019b-37c2-4426-a9ca-d4e57d48ffec","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"6d91ce8c-1454-408b-b42a-f13ed34d7741","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b947ca15-7493-455f-834b-f1bddb015cde","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"bca11f89-3090-45c9-8730-9d2bfe3d8533","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8a50b408-80ee-443d-a2d6-ba6d4e0cff64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2928a65c-9eb7-4566-947d-dcd1b964242a","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"dac60248-5749-4548-96c1-5ac67b63dfba","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"30d4007d-ac66-497f-b333-92fbf155f379","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"7243b1bf-b870-4199-a0d9-accf339eaf9a","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de71aa3e-78f6-412f-99eb-b89cde8a0cb7","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"1245bac8-b2d7-4bb7-a0d4-ca10152819f3","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"76f3c859-c392-44dc-af32-6003bfe33fe2","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de23f283-0ab0-44f4-bb22-5a3771cd5366","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8cde5af9-f36a-4bc2-a396-76735b77adfc","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3ff57337-c9a3-4afe-971e-a2ffa073d412","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"395b26ec-782f-447c-b558-d565b399ac81","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4690b659-1897-49d5-8743-adc5eb02d41f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b35f451b-a8e4-41ec-a686-a940d1c62271","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"041092ab-8521-4e42-9a41-094038252b05","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"6f87b8ff-da60-4307-af0a-8e73170cfc0c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"cb06d0d4-32e7-4c71-a53a-9885cbe10ce5","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"36611fc3-508f-430b-a33b-86ffb4b2c1c9","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"e5514e63-4aaa-456c-9c76-b462ddc4a85c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9e8b8e90-de25-49a0-abb4-551bc5ea9e64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"6678d138-580e-4b9b-b81f-55e328061d72","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"c14b681e-ebf8-4fdb-953d-ed9972772441","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b270146e-438e-43ec-a233-c509042c9600","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
当您需要通过点击按钮来触发某种行为,如跳转、切换页面、切换选项卡、显示或隐藏其他组件时,就可以使用按钮组件。
在推出按钮组件之前,用户如果要创建一个可以执行命令的按钮,通常需要拖拽一个图片组件并为其绑定一个命令。如果需要文字描述,还要增加一个富文本组件,添加文字说明。两个组件堆叠会导致操作困难,仪表板也会变得比较“笨重”。
而现在有了按钮组件完全可以简化这个过程,下面是使用按钮组件实现的页面导航器、切换选项卡以及按钮跳转的效果。
页面导航器:点击按钮切换整个页面。
选项卡内切换:点击按钮可在选项卡内进行切换,仪表板页面不变。
跳转按钮:点击按钮可进行跳转动作。
接下来,介绍各种方案的实现方法,并提供了资源包供您下载后导入系统进行参考。
前提条件:仪表板内已经创建好多个页面。示例中我们创建了3个页面。
1. 打开组件列表,选择按钮组件并拖拽至编辑区,作为页面导航的第一个菜单。
2. 调整外观。
由于这是第1页的第一个菜单,所以点击它也不需要进行任何切换动作。这里仅需设置外观使其默认显示为选中状态即可。
具体为设置显示文本。
添加背景图片,将填充颜色设置为透明。这里背景图片使用选中时的图片。
边框设置为0。
设置悬浮样式。
效果如下图。
3. 添加第二个菜单并调整外观。设置显示文本、边框宽度为0、设置悬浮样式。并添加一个非选中时的背景图片。效果如下。
与第一个菜单的最大区别是要为第二个菜单添加切换页面的命令。选中组件,将鼠标左键选项设置为命令,然后添加命令。
命令内容为切换页面到第2页,完成后点击确定。
4. 添加第三个菜单。可以直接将第二个菜单复制-粘贴,然后修改显示文本和切换的页面即可。
至此第一页的导航菜单就完成了,接下来依照相同的思路在其他页面创建导航。
为了打造无痕切换的效果,建议直接将做好的导航(按住CTRL键可多选组件)复制-粘贴到其他页面,然后修改调整。
比如,将第一页导航复制-粘贴到第二页,然后进行修改,主要修改点如下:
为第一个菜单添加命令,内容为切换到第1页;将背景图片更换为非选中图片。
将第二个菜单的背景图片更换为选中图片,营造选中效果。
三个页面的导航器全都做好后,预览查看效果即可呈现文初的效果。
下载资源包,然后将其导入系统,可以看到具体的设计细节,方便您参考学习。
切换选项卡的制作过程与切换页面类似,核心是通过为按钮添加命令实现切换行为。
示例中,我们在选项卡中添加了三个页签,每个页签放了一个组件。
下面介绍切换按钮的具体制作过程。
1. 首先添加按钮组件。
2. 设置数据交互属性。将鼠标左键选项设置为命令,并添加命令使其切换选项卡1.
修改显示文本,设置分组名称,开启点击选中。
分组名称:设置组名称,一组中一次只能选择一个按钮。我们将多个按钮设置成相同的组名称,即可实现单选效果。
此时按钮已经具备切换到选项卡1的功能了,只是外观不太理想。
3. 接下来继续设置外观相关属性。
组件样式中的边框宽度设置为0。
设置悬浮样式。
设置选中时的背景图片,并将填充颜色透明度设置为0。
在外观样式中设置背景图片,并将填充颜色透明度设置为0。
此时,第一个切换按钮就制作完成了,预览仪表板时也可以实现切换至选项卡1的效果。
4. 接着,制作后续的切换按钮。将第一个切换按钮复制-粘贴,并修改显示文本和切换目标即可。
至此就完成了选项卡切换按钮的制作。
5. 后续可以将选项卡的页签隐藏,使用效果更佳。
预览仪表板即显示文初的示例效果。
下载资源包,然后将其导入系统,可以看到具体的设计细节,方便您参考学习。
还可以为按钮组件添加跳转,并适当调整外观形成按钮效果。
主要操作步骤如下:
添加按钮组件,为其添加跳转项目。
示例中以外部链接为例。
修改按钮上显示的文本。
在组件样式中添加图片,调整图片大小、与文本的间距和布局方式、边框等。本示例中我们添加了一个图片,将布局方式改为了纵向布局,边框宽度设为0。
继续在外观样式中将填充颜色的透明度设置为0。
此时按钮即可呈现如下效果。
后续继续调整按钮的悬浮样式和选中样式即可完成一个按钮制作。此时设置悬浮和选中样式时可使用图片属性,来变换按钮不同状态的图标。
当添加的按钮较多时,可以借助设计器的功能辅助我们进行对齐,平均分布或同大小等。
下载资源包,然后将其导入系统,可以看到具体的设计细节,方便您参考学习。