按钮

2025年1月14日大约 3 分钟

按钮是用户用来触发特定功能或操作的组件。可单独使用，亦用于过滤容器的搜索、重置操作和分析组件的操作按钮。一般用来完成看板页面之间的的跳转，或者从看板跳转到可视化大屏或第三方链接。

按钮的基本配置项包括以下几项：

标题：设置按钮组件的标题。
名称：设置按钮上的文字。
颜色：设置按钮的背景色和字体色。
样式：设置按钮的样式，按钮默认样式为圆角长方形。
- 扁平：扁平模式，纯文本展示，将背景色作为按钮文字颜色。
- 轮廓线：轮廓线模式，将背景色作为按钮文字和按钮边框线的颜色。
- 圆形：按钮边框为圆弧，按钮呈现为椭圆或圆形。
- 方形圆角：按钮边框上下为直线，左右为圆弧。
- 移除圆角：去除按钮圆角，按钮为标准长方形。
- 移除阴影：去除按钮阴影，不显示按钮阴影。
提示
按钮样式可多选，来组合出更多的效果。
边距：设置按钮的内边距，点击边距前的按钮可在统一设置和单一设置之间切换设置方式，单位为 px（像素）。
- 统一设置：将按钮上、下、左、右的边距设置为同一大小。
- 单一设置：按照上、右、下、左的顺序，单独设置按钮边距大小。
图标：设置文字左侧和右侧的按钮，图标的颜色跟随文字。
链接配置：设置点击按钮时，按钮打开链接的地址和打开方式等。
点击链接配置按钮，左侧弹窗显示按钮链接的配置信息。
- 链接类型：选择跳转链接的类型，可跳转到看板、大屏或外链。
- 链接地址：根据链接类型，展示对应的链接地址设置框。链接类型为看板或大屏时为下拉选择框，类型为外链时为文本域输入。
  - （刷新）：当链接类型为看板或大屏时显示此按钮，点击此按钮可获取最新的看板/大屏列表。
- 链接参数：管理跳转时链接内跟随的参数，参数会拼接到 url 里。
  - （① 添加）：点击添加一个参数，添加参数无数量限制。
  - （② 删除）：点击删除当前参数。
  - ③ 设置参数区：设置参数名、值类型和参数值，最终拼接到 url 中的规则为参数名=参数值。
    - 值类型：设置参数值的类型。
      - 固定值：参数值为输入框，跳转时输入框的值作为参数值。
      - 全局参数：参数值为下拉框，下拉列表为当前看板添加的全局参数，跳转时全局参数的值作为参数值。
- 打开方式：设置打开链接的方式。
  - 新窗口：在新的窗口打开链接。
  - 当前窗口：在当前窗口打开链接，替换当前页面。
  - 弹窗：在当前窗口打开一个弹窗，展示要打开的链接。
- 显示标题：设置窗口标题，只在打开方式为弹窗时才会出现此设置。
  - 显示：勾选后窗口显示标题区域。
  - 文本框：设置打开窗口的标题内容。
- 弹窗位置：设置弹窗出现的位置。
  - 中心：在页面中心弹窗展示。
  - 左侧：从页面左侧，以抽屉的形式弹窗展示。
  - 右侧：从页面右侧，以抽屉的形式弹窗展示。
  - 上方：从页面上方，以抽屉的形式弹窗展示。
  - 下方：从页面下方，以抽屉的形式弹窗展示。
- 弹窗大小：设置弹窗的宽度和高度。
  - 全屏：弹窗覆盖整个页面。
  - 自定义：弹窗设置为自定义大小。
  - 宽度：设置弹窗的自定义宽度值，当弹窗大小为自定义时展示此设置，单位是 px（像素）。
  - 高度：设置弹窗的自定义高度值，当弹窗大小为自定义时展示此设置，单位是 px（像素）。