气泡卡片

图表样式

气泡卡片是高级控件组件的一种，支持自定义设置气泡卡片按钮样式和卡片展示的样式，常用来展示一些小体量的弹窗信息。

样式面板

• 搜索配置：单击样式面板右上角的搜索配置项图标，可在搜索配置面板中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索配置项。

• • 尺寸：包括组件的宽度和高度，单位为px。

  • 定位：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

  • 旋转：以组件的中心为中心点，进行旋转，单位为度（°）。

    • 手动输入角度值，控制组件的旋转角度。

    • 单击图标，控制组件左右翻转样式。

    • 单击图标，控制组件上下翻转样式。

  • 不透明度：取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1。

• 按钮样式

  参数	说明
  显示文本	自定义输入设置气泡卡片的显示文本，默认为Bubble。
  触发方式	设置气泡卡片按钮的触发方式，可选点击和悬浮。
  文本对齐	气泡卡片按钮中的文本对齐方式，可选左对齐、居中对齐和右对齐。
  文本边距	泡卡片按钮中的文本距离左右两侧的边距值，单位px。
  普通样式	气泡卡片按钮的普通状态下的样式。 背景颜色：气泡卡片按钮的背景颜色。 边框样式：气泡卡片按钮的边框样式，包括按钮边框的线类型、边框的圆角角度值、边框的线宽值和边框的颜色。 文本样式：设置选中气泡卡片按钮内文本的字体样式、文本的粗细、文本的字号大小和文本的颜色。
  悬浮样式	当鼠标悬浮到某一气泡卡片按钮时的样式。 背景颜色：悬浮到气泡卡片按钮时的背景颜色。 边框样式：悬浮到气泡卡片按钮时的边框样式，包括按钮边框的线类型、边框的圆角角度值、边框的线宽值和边框的颜色。 文本样式：设置悬浮到气泡卡片按钮内文本的字体样式、文本的粗细、文本的字号大小和文本的颜色。

• 卡片样式

  参数	说明
  卡片布局	气泡卡片的布局样式，包括卡片显示的位置选择和卡片和按钮之间的间距值。
  卡片尺寸	气泡卡片的尺寸样式，包括卡片的宽度值大小和是否开启高度自适应配置效果。
  指向箭头	气泡卡片的指向箭头的样式，包括箭头的大小值和箭头的颜色。
  标题	气泡卡片的标题部分的样式，可单击图标控制标题的显隐。 自定义高度：自定义设置标题的高度值，单位px。 背景颜色：设置标题部分的背景颜色。 水平对齐：自定义设置标题文本水平方向对齐的方式，可选左对齐、居中对齐和右对齐。 垂直对齐：自定义设置标题文本垂直方向对齐的方式，可选上对齐、居中对齐和下对齐。 文本边距：设置标题文本在水平方向和垂直方向的边距值，单位为像素。 文本样式：设置标题文本的文字样式，包括文本字体样式、文本的粗细值、字号的大小值和文本的颜色。 分割线：设置标题的分割线样式，包括分割线的线类型、线的宽度值和线的颜色。
  内容	气泡卡片中内容部分的样式，可单击图标控制内容的显隐。 自定义高度：自定义设置内容的高度值，单位px。 背景颜色：设置内容部分的背景颜色。 水平对齐：自定义设置内容文本水平方向对齐的方式，可选左对齐、居中对齐和右对齐。 垂直对齐：自定义设置内容文本垂直方向对齐的方式，可选上对齐、居中对齐和下对齐。 文本边距：设置内容文本在水平方向和垂直方向的边距值， 单位px。 文本样式：设置内容文本的文字样式，包括文本字体样式、文本的粗细值、 字号的大小值和文本的颜色。

数据源面板

高级面板

该组件无事件配置。

蓝图交互

1. 单击页面左上角的图标，进入蓝图页面。

2. 在图层节点页签下，添加当前组件至主画布中。

3. 参考蓝图配置参数。

   • 事件

     事件	说明
     当气泡卡片数据接口请求完成时	数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。

   • 动作

     动作	说明
     导入气泡卡片数据接口	按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据，查看数据示例。 [ { "title": "标题", "content": "这是气泡卡片的一段描述。", "show": false } ]
     请求气泡卡片数据接口	重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如气泡卡片配置了API数据源为https://api.test，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为https://api.test?id=1。
     移动	将组件移动到指定位置，参考数据示例。 { // 移动方式。绝对定位：to，相对定位：by。默认值：to。 "positionType": "to", // 指定位置。x坐标，y坐标。 "attr": { "x": 0, "y": 0 }, // 动画方式。 "animation": { "enable": false, // 动画延时。 "animationDuration": 1000, // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
     切换显隐	切换组件显示或隐藏，不需要参数。
     显示	显示组件，参考数据示例。 { "animationType": "",//动画方式，可选值：fade，不填无动画。 "animationDuration": 1000,//动画延迟，单位ms。 "animationEasing": ""//动画曲线 }
     隐藏	隐藏组件，参考数据示例。 { "animationType": "",//动画方式，可选值：fade，不填无动画。 "animationDuration": 1000,//动画延迟，单位ms。 "animationEasing": ""//动画曲线 }
     更新组件配置	动态更新组件的样式配置。需要先在组件的样式面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。