本文介绍组件库重要组件的重要特殊属性
¶ 通用
¶ 按钮
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 文本 | input | 按钮 | 输入框，用于自定义按钮显示的文本。 | |
| 类型 | select | 主要 | 默认: default 次要: tertiary 主要: primary 信息: info 成功: success 警告: warning 异常: error |
选择框，定义按钮的样式类型。 |
| 边框 | switch | 切换按钮，控制是否显示按钮边框。 | ||
| 圆形按钮 | switch | 切换按钮，控制按钮是否为圆形。 | ||
| 按钮颜色 | color | 颜色选择器，定义按钮的填充颜色。 | ||
| 虚线边框 | switch | 切换按钮，控制边框是否为虚线。 | ||
| 禁用 | switch | 切换按钮，禁用后按钮将不可点击。 | ||
| 透明 | switch | 切换按钮，使按钮背景透明。 | ||
| 加载中 | switch | 切换按钮，表示按钮处于加载状态。 | ||
| 圆角 | switch | 切换按钮，为按钮添加圆角效果。 | ||
| 次要按钮 | switch | 切换按钮，设置按钮为次要样式。 | ||
| 三级按钮 | switch | 切换按钮，设置按钮为三级样式。 | ||
| 四级按钮 | switch | 切换按钮，设置按钮为四级样式 | ||
| 文字加粗 | switch | 切换按钮，使按钮文本加粗显示。 | ||
| 文字颜色 | color | 颜色选择器，定义按钮文本的颜色。 |
¶ 轮播图
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 图片地址 | coder | [‘http://example.com’] | 输入一个或多个图片URL地址，以数组形式提供。 | |
| 自动播放 | switch | 开关，用于控制轮播图是否自动播放。 | ||
| 自动播放间隔(ms) | number | 5000 | 设置自动播放时轮播图切换的时间间隔，单位为毫秒。 | |
| 居中显示当前页轮播图 | switch | 开关，用于控制是否居中显示当前页的轮播图。 | ||
| 循环播放 | switch | true | 开关，开启后轮播图将循环播放。 | |
| 鼠标拖拽切换 | switch | 开关，开启后可使用鼠标拖拽切换轮播图。 | ||
| 鼠标滚轮切换轮播图 | switch | 开关，开启后可使用鼠标滚轮切换轮播图。 | ||
| 箭头按钮 | switch | 开关，开启后将显示轮播图的箭头按钮。 | ||
| 指示点 | switch | true | 开关，开启后将显示轮播图的指示点。 | |
| 每页显示的轮播图数量 | number | 1 | 设置每页显示的轮播图数量。 | |
| 轮播图之间的间距 | number | 设置轮播图之间的间距，单位为像素。 | ||
| 显示方向 | select | horizontal | 水平: horizontal 垂直: vertical |
选择框，设置轮播图的显示方向。 |
| 指示点位置 | select | bottom | 顶部: top 底部: bottom 左侧: left 右侧: right |
选择框，设置轮播图指示点的位置。 |
| 指示点样式 | select | dot | 圆点: dot 条形: line |
选择框，设置轮播图指示点的样式。 |
| 过渡效果 | select | slide | 滑动: slide 渐变: fade 卡片: card |
选择框，设置轮播图切换时的过渡效果。 |
| 触发切换的方式 | select | slide | 滑动: slide 渐变: fade 卡片: card |
选择框，设置触发轮播图切换的方式。 |
¶ 日期与时间
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 字体大小 | number | 16 | 单位：px | 设置字体的尺寸 |
| 字体粗细 | number | 500 | 设置字体的粗细 | |
| 字体颜色 | color | #fff | 设置字体的颜色 | |
| 背景颜色 | color | 设置背景颜色 | ||
| 间距 | number | 单位：px | 设置元素间的间距 |
¶ 边框
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 主要颜色 | color | #4fd2dd | 设置主题的主要颜色 | |
| 次要颜色 | color | #235fa7 | 设置主题的次要颜色 | |
| 边框样式 | select | BorderBox1 | 请自行尝试 | 选择边框的样式 |
¶ 描述列表
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 标题 | input | 标题 | 输入标题内容 | |
| 数据 | coder | [{ label: ‘早餐’, value: ‘苹果’ }] | 编码器，用于输入数据项，包括标签和值 | |
| 边框 | switch | true | 开关，用于控制是否显示边框 | |
| 列数 | number | 3 | 数字输入，设置列的数量 | |
| 内容样式 | coder | 编码器，用于设置内容的样式 | ||
| label样式 | coder | 编码器，用于设置标签的样式 | ||
| label 对齐方式 | select | left | 居中: center 靠左: left 靠右: right |
选择框，设置标签的对齐方式 |
| label 显示位置 | select | top | 顶部: top 左侧: left |
选择框，设置标签的显示位置 |
| 分隔符 | input | : | 输入框，设置标签和值之间的分隔符 |
¶ 描述列表
数据：静态数据的修改。如需使用数据源数据，请使用数据过滤将数据修改为静态数据的格式。
¶ 数据表格
表头配置： 表头与内容关系的绑定。通过配置相同的key值，让表头与数据对应。
配置项：key:“key值”，title:“列标题名称”
内容：静态数据，包含的每一个对象视为表格一列的数据。
配置项：”key值“：”该行数据“
¶ 飞线图
流向坐标点：数据从第二地名流向第一地名。
流出坐标点：数据从第一地名流向第二地名。
配置项：name：“地名” value：“数值”
¶ 滑动选择
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 步长 | number | 16 | 单位：px | 每次移动距离 |
| 最大值 | number | 500 | ||
| 最小值 | number | #fff | ||
| 垂直显示 | boolean | 默认为平行 | ||
| 轨道倒转 | boolean | 单位：px | 翻转 | |
| 禁用 | boolean | 单位：px |
¶ 页面容器
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 页面 | switch | 组件展示第几页 | ||
| 启动循环 | boolean | false | 是否启动循环 | |
| 循环页面 | switchs | 循环那些页面 | ||
| 循环时间 | input | 单位：s | 多久循环一次 |
¶ 地图
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| 高度 | number | |||
| 地图模式 | switchs | false | 地图显示模式 | |
| 缩放等级 | number | |||
| 打点数据 | coder | 地图点数据 | ||
| 点样式 | select | 点图标显示 | ||
| 点大小 | number | 图标大小 | ||
| 是否出现搜索 | number | 对点数据搜索，地图中心跳跃至搜索点 |
¶ 打点数据
[
{
"position": [
106.27108,
29.535652
],
"content": "content",
"title": "title",
"target": "page_a0afe00ca82c",
"base": "datasource_532e77bce209"
//"base": ["datasource_532e77bce209","datasource_532e77bce209"]
}
]
| 属性路径 | 类型 | 默认值 | 配置选项 | 说明 |
|---|---|---|---|---|
| position | Array | 点坐标 | ||
| content | String | 传出参数用于刷新数据源 | ||
| title | String | 点名称 | ||
| target | String | 点击点 跳转到指定页面 | ||
| base | String/Array | 点击点 需要刷新的数据源 |
¶ 滚动表单
表头配置： 表头与内容关系的绑定。通过配置相同的key值，让表头与数据对应。
配置项：key:“key值”，title:“列标题名称”
[
{
"title": "No",
"key": "no"
},
{
"title": "Title",
"key": "title"
},
{
"title": "Length",
"key": "length"
}
]
内容：静态数据，包含的每一个对象视为表格一列的数据。
配置项：”key值“：”该行数据“
[
{
"no": 3,
"title": "Wonderwall",
"length": "4:18"
},
{
"no": 4,
"title": "Don't Look Back in Anger",
"length": "4:48"
},
{
"no": 12,
"title": "Champagne Supernova",
"length": "7:27"
}
]