[]
按钮在仪表板中是一个重要的交互元素，能够增强用户体验并提升操作效率。可以显著提升仪表板的交互性、易用性和美观性。无论是页面跳转还是参数设置，按钮都能为用户提供高效的操作体验。
当您需要通过单击按钮来触发某种行为，如跳转、切换页面、切换选项卡、显示或隐藏其他组件时，就可以使用按钮组件。
本文将指导您在Wyn中创建和使用按钮。
仪表板设计界面最左侧，单击组件按钮展开列表，选择按钮，按住鼠标左键将其拖拽至仪表板设计区域，成功添加一个按钮组件。
通过属性“鼠标左键选项”来控制点击按钮的行为，提供了两个选项，分别跳转和命令，默认执行跳转。
行为 | 说明 | 图示 |
|---|---|---|
跳转 | 在运行时单击按钮即可触发跳转至指定文档，只需将左键动作设为"跳转"并配置目标项目（具体设置方法参考文档跳转 |
|
命令 | 配置左键动作为"命令"并添加所需指令（支持多命令顺序执行），单击时即按列表自上而下依次触发，详见组件命令 |
|
按钮行为设置完成后，可通过以下属性配置进一步优化组件展示效果：
属性 | 说明 | 系统图示 |
|---|---|---|
数据交互 | 配置联动、跳转、刷新等行为 |
|
组件样式 | 设置按钮的组件样式，包括字体样式、对齐方式、图片等属性 | |
设置组件入场动画、延迟和持续时间 | ||
悬浮样式 | 设置鼠标悬浮样式 | |
选中样式 | ||
调整组件位置于整体尺寸 | ||
调整组件外观样式 |
按钮额外支持以下独有属性：
数据交互： 在属性设置中，可通过数据交互自动标记按钮的交互属性，包括组件名称、跳转设置、鼠标左键选项等。
属性 | 说明 | 系统图示 |
|---|---|---|
组件名称 | 设置按钮的组件名称 |
|
跳转设置 | 当鼠标左键选项设置为跳转时，配置跳转属性 | |
鼠标左键选项 | 鼠标左键选项，可以选择跳转或命令 | |
命令 | 当鼠标左键选项设置为命令时，配置命令属性 | |
文本 | 设置按钮的文本 | |
分组名称 | 设置按钮的分组名称 当按钮属于同一个分组时，开启单击选中属性，组内按钮将变为单选模式，点击切换选中状态 | |
点击选中 | 设置是否单击选中 | |
默认选中 | 设置是否默认选中 |
组件样式： 在属性设置中，可通过组件样式自动标记按钮的组件样式，包括字体样式、对齐方式、图片等属性。
属性 | 说明 | 系统图示 |
|---|---|---|
字体样式 | 设置按钮的文字样式 |
|
对齐方式 | 设置按钮中文字的对齐方式，支持左对齐/矩阵/右对齐 | |
图片 | 设置按钮中需要显示的图片 | |
图片宽度/高度 | 设置所选图片的宽度和高度 | |
文本图片间距 | 设置所选图片和文字的间距 | |
图片布局 | 设置图片布局，支持左侧/右侧/上侧/下侧 | |
边框颜色/宽度/圆角 | 设置按钮的边框的颜色、宽度和圆角属性 |
悬浮样式： 在属性设置中，可通过悬浮样式自动标记鼠标悬浮至按钮时的悬浮样式属性，包括悬浮显示的图片、背景图片、填充颜色和字体颜色。
选中样式： 在属性设置中，可通过选中样式自动标记按钮选中样式属性，包括设置按钮选中显示的图片、背景图片、填充颜色和字体颜色（需开启默认选中或者点击选中）。
组件内置丰富的数据探索与分析功能，从多角度挖掘数据价值，为您的可视化分析提供专业级支持。
前面介绍了按钮组件支持的命令，下面通过3个实例向您展示按钮的功能与用法
页面导航器： 单击按钮切换整个页面。
前提条件： 仪表板内已经创建好多个页面。示例中我们创建了3个页面。
操作步骤
1）打开组件列表，选择按钮组件并拖拽至编辑区，作为页面导航的第一个菜单。
2）调整外观样式。
i）由于这是第1页的第一个菜单，所以单击它也不需要进行任何切换动作。这里仅需设置外观使其默认显示为选中状态即可。具体为设置显示文本。
ii）添加背景图片，将填充颜色设置为透明。这里背景图片使用选中时的图片。
iii） 边框设置为0。
iv）设置悬浮样式。
v）效果如下图。
3） 添加第二个菜单并调整外观。设置显示文本、边框宽度为0、设置悬浮样式。并添加一个非选中时的背景图片。效果如下。
i）与第一个菜单的最大区别是要为第二个菜单添加切换页面的命令。选中组件，将鼠标左键选项设置为命令，然后添加命令。
ii）命令内容为切换页面到第2页，完成后单击确定。
4）添加第三个菜单。可以直接将第二个菜单复制-粘贴，然后修改显示文本和切换的页面即可。
5）至此第一页的导航菜单就完成了，接下来依照相同的思路在其他页面创建导航。
6）为了打造无痕切换的效果，建议直接将做好的导航（按住CTRL键可多选组件）复制-粘贴到其他页面，然后修改调整。比如，将第一页导航复制-粘贴到第二页，然后进行修改，主要修改点如下：
为第一个菜单添加命令，内容为切换到第1页；将背景图片更换为非选中图片。
将第二个菜单的背景图片更换为选中图片，营造选中效果。
7）三个页面的导航器全都做好后，预览查看效果即可呈现文初的效果。
资源下载
示例文件包： 下载后，您可直接导入至对应版本系统中查看使用。
注意： 本示例压缩包基于8.1版本制作，请使用8.1及以上版本并参照导入与导出文档操作（低版本可能存在兼容性问题，建议升级）
选项卡内切换： 单击按钮可在选项卡内进行切换，仪表板页面不变。
切换选项卡的制作过程与切换页面类似，核心是通过为按钮添加命令实现切换行为。
示例中，我们在选项卡中添加了三个页签，每个页签放了一个组件。
下面介绍切换按钮的具体制作过程。
首先添加按钮组件。
设置数据交互属性。将鼠标左键选项设置为命令，并添加命令使其切换选项卡1。
1）修改显示文本，设置分组名称，开启点击选中。
2）分组名称：设置组名称，一组中一次只能选择一个按钮。我们将多个按钮设置成相同的组名称，即可实现单选效果。
3）此时按钮已经具备切换到选项卡1的功能了，只是外观不太理想。
接下来继续设置外观相关属性。
1）组件样式中的边框宽度设置为0。
2）设置悬浮样式。
3）设置选中时的背景图片，并将填充颜色透明度设置为0。
4）在外观样式中设置背景图片，并将填充颜色透明度设置为0。
5）此时，第一个切换按钮就制作完成了，预览仪表板时也可以实现切换至选项卡1的效果。
接着，制作后续的切换按钮。将第一个切换按钮复制-粘贴，并修改显示文本和切换目标即可。
至此就完成了选项卡切换按钮的制作。
后续可以将选项卡的页签隐藏，使用效果更佳。
预览仪表板即显示文初的示例效果。
资源下载
示例文件包： 下载后，您可直接导入至对应版本系统中查看使用。
注意： 本示例压缩包基于8.1版本制作，请使用8.1及以上版本并参照导入与导出文档操作（低版本可能存在兼容性问题，建议升级）
跳转按钮： 单击按钮可进行跳转动作。
还可以为按钮组件添加跳转，并适当调整外观形成按钮效果。
主要操作步骤如下：
添加按钮组件，为其添加跳转项目。
示例中以外部链接为例。
修改按钮上显示的文本。
在组件样式中添加图片，调整图片大小、与文本的间距和布局方式、边框等。本示例中我们添加了一个图片，将布局方式改为了纵向布局，边框宽度设为0。
继续在外观样式中将填充颜色的透明度设置为0。
此时按钮即可呈现如下效果。
然后续继续调整按钮的悬浮样式和选中样式即可完成一个按钮制作。此时设置悬浮和选中样式时可使用图片属性，来变换按钮不同状态的图标。
当添加的按钮较多时，可以借助设计器的功能辅助我们进行对齐，平均分布或同大小等。
资源下载
示例文件包： 下载后，您可直接导入至对应版本系统中查看使用。
注意： 本示例压缩包基于8.1版本制作，请使用8.1及以上版本并参照导入与导出文档操作（低版本可能存在兼容性问题，建议升级）
