卡片列表

卡片列表是对数据进行集合展示，是一种特殊的列表形式，其特点是每一个卡片高度固定。卡片作为一个独立的容器，可以在内容上进行良好的布局组织，将信息分块，突出重点，从视觉感知上就对内容进行了分隔，本章节主要介绍卡片列表组件各配置项的含义。

效果案例

组件结构

卡片列表组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。

父组件配置

子组件管理

系统提供了容器的配置作为子组件，使用者可根据实际场景对子组件进行添加和配置。支持对已添加子组件进行启用禁用、重命名、条件配置、复制、删除操作。

条件配置：满足条件时，子组件才启用成功。可根据场景需要应用子组件。

配置

基础属性

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

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

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

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

全局

排列方式：配置卡片的排列方式。

每列/行个数：通过配置每行/列的个数确定每个卡片的宽高。

纵向/横向间距：卡片与卡片之间的距离。

内容溢出：内容超出（卡片的数据量超过每列/行个数）时可以选择显示、隐藏或轮播显示，选择隐藏或轮播显示时，支持鼠标滚动显示溢出内容。

显示：

隐藏：

轮播显示：

溢出布局：当最后一列/行的卡片数量小于所设置每列/行的数量时，可配置其对齐方式。

居左：

居中：

居右：

轮播动画：轮播显示开启后可配置其动画效果。

• 动画：

  1. 动画衔接：选择轮播动画的衔接方式。当动画衔接为重头开始时，默认更新行列数为1。

  2. 停止条件：轮播动画的停止条件。

  3. 时间间隔 ：单次滚动动画的时间。

  4. 更新行/列数：单次滚动更新的数据。

  5. 动画时间 ：单次滚动动画的时间。

  6. 动画速度：匀速、慢快慢、低速开始、低速结束、低速开始和结束。

     

• 分页器：可配置分页器的位置和样式以及选中颜色。

• 前进后退按钮：可配置前进后退按钮的显示方式、位置和样式。

卡片

可配置卡片的背景颜色、边框样式和圆角。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "time": "9.00-10.00",
        "name": "游泳",
        "index": "进行中"
    }
]

交互

支持配置鼠标点击时事件：
当鼠标点击卡片时，触发交互事件：设置大屏变量、设置可见、移动、设置JS事件、设置面板状态；

子组件配置

容器

1. 布局方式采用容器套容器的方式，把卡片看作第一级容器，容器可以是单独的字段，同时还可在每层容器中定义多个字段。
2. 单张卡片作为第一级容器，其内对象是自由式布局；
3. 子容器宽高根据内容自适应，其内对象规律排列。

配置

宽度：可配置整个容器的宽度，容器内字段宽度大于容器时隐藏；容器的高度将根据容器内的字段自适应。

位置：容器相对于左上角的固定位置。

布局方式：

• 绝对布局：容器内的字段将根据相对于容器左上角的位置进行定位；
• 相对布局：容器内的字段将根据字段的宽度/高度进行水平/垂直排列，可配置两个字段之间的间隔。

字段：

• 附加字段：此字段为非数据源字段的常量字段。值类型仅为文本或图片时可配置该字段；
• 字段名称：当附加字段关闭时，输入数据源中存在的字段，则该字段就会在该容器显示；
• 位置：当容器的布局方式选择绝对位置时，配置该字段相对于容器左上角的位置进行定位；
• 偏移：当容器的布局方式选择相对位置时，若父组件为水平排列，则此处为垂直偏移；若父组件为垂直排列，则此处为水平偏移；
• 值样式：

1. 值类型：容器内容的类型，可选文本、数值、指标、图片、标签组、进度条；
2. 宽度：可配置字段的宽度，为空时将根据其内容自适应；
3. 对齐方式：当字段宽度不为空时可配置其内容的对齐方式。
4. 文本配置：值类型选择文本
   1. 富文本：开启后数据支持富文本格式；
   2. 内容溢出：当文本的长度超过所设置的宽度时，可配置其溢出显示的方式；
   3. 提示：鼠标移入字段内容，可通过tooltip显示完整（仅当内容溢出，且显示形式为省略号或隐藏时生效），启用后可配置tooltip的样式；
   4. 行距：相邻两行间的距离；
   5. 文本样式：可配置文本的字体、字号、颜色、粗细、字间距样式；
   6. 样式系列：当满足条件时可设置不同的样式系列。

富文本：

内容溢出-省略号:

内容溢出-换行:

内容溢出-隐藏:

跑马灯动画：

5. 数值配置：值类型选择数值
   1. 前缀-数字：前缀与数字之间的距离；
   2. 后缀-数字：后缀与数字之间的距离；
   3. 前缀：可设置前缀的内容、文本样式和垂直偏移的距离；
   4. 数字：
      1. 文本样式：可配置数字的字体、字号、颜色、粗细、字间距样式；
      2. 样式区间：开启后，设置数值范围，在该范围内的数字的样式显示为该区间中设置的样式；
      3. 宽度自适应：翻牌器数字间隔是否根据组件框宽度自适应显示。开启宽度自适应时，若组件框尺寸宽度大于组件实际宽度，字间距配置失效，数字间隔根据组件框宽度自适应；
      4. 动画：可配置数值的动画效果；
      5. 格式化：数字的格式化。
   5. 后缀：可设置后缀的内容、文本样式和垂直偏移的距离；

补零：

6. 指标配置：值类型选择指标
   1. 基础值：以此数值为基础值，来判断图标走势。默认基础值为0，基础值不允许为空。可选择字段；
   2. 显示数值：启用后，显示出数值，可设置的数值样式；
   3. 图标-数值：图标与数值之间的距离；
   4. 图标：可选择指标的图标以及不同趋势下的指标颜色；
   5. 样式系列：满足条件时可设置不同的样式系列；
   6. 文本样式：可配置数值的文本样式，若启用“是否同步数值颜色”，则该配置不生效；
   7. 格式化：数值的格式化；
   8. 后缀：可设置后缀的内容、文本样式和垂直、左偏移的距离，若启用“是否同步数值颜色”，则文本样式配置不生效。

样式系列：

7. 图片配置：值类型选择图片
   1. 图片：附加字段开启后，可自定义图片的样式；
   2. 宽度/高度：配置图片的大小；
   3. 样式系列：附加字段开启后，满足条件时可设置不同的样式系列。

样式系列：

8. 标签组配置：值类型选择标签组
   1. 分隔符：可自定义分隔符，用于标识文字分隔的位置；
   2. 间隔：标签与标签之间的距离；
   3. 水平/垂直内间距：通过设置内边距来确定标签的宽高（根据文字长度自适应）；
   4. 默认样式：可配置标签的背景颜色、圆角、边框和文本样式
   5. 样式系列：满足条件时可设置不同的样式系列。

样式系列：

9. 进度条配置：值类型选择进度条
   1. 最大值：可自定义进度条的最大值，支持表达式选取字段；
   2. 进度条：可自定义配置进度条的类型、颜色和圆角
      1. 栅格个数：即最大值时会显示多少栅格，其进度条栅格数将根据。
   3. 文本：启用后可显示进度条的数值；
   4. 格式化：进度条数值的格式化；
   5. 样式区间：开启后，设置数值范围，在该范围内的进度条的样式显示为该区间中设置的样式；
   6. 外框：
   7. 后缀：可设置后缀的内容（支持表达式可选择字段）、文本样式和垂直偏移的距离；

栅栏个数：

外框：

后缀；

数据

无需配置数据。

交互

没有交互事件。