visix-ui v1.0.34

DATAV2.0组件库-组件规建清单-草案

01 常规组件

1.1 单行文本（text）

1.1.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.1.2 组件要求

• 包裹容器
• 文本内容

1.1.3 实现要求

• 包裹容器：背景色块、内距距、边框大小/颜色/样式可配置
• 字体颜色（需要单色和淅变色（浙变的方向：上下、左右或自由角度））、大小、字体、粗细，对齐方式（水平）可配置
• 文本数据发生变化时，文字切换过过渡动画
• 超长文本的跑马灯动画（可配置）
• 可转换为链接文本

1.1.4 事件交互

• 用户点击事件
• 文本变更事件

1.2 多行文本(mutilText)

1.2.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.2.2 组件要求

• 包裹容器
• 文本内容

1.2.3 实现要素

• 包裹容器：背景色块、内距距、边框大小/颜色/样式可配置
• 字体颜色、大小、字体、粗细，字体行间距
• 若有滚动条，滚动条样式可配置
• 超长文本的上下滚动动画（可选配1、与选配2二选一）
• 超长文本的上下滚动条（可选配2、与选配1二选一）

1.2.4 事件交互

• 文本变更事件

1.3 按钮（Button）

1.3.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.3.2 组件要求

• 按钮
• 按钮文字（选配）
• 按钮ICON（选配）
• tootip信息（选配）

1.3.3 实现要求

• 按钮：背景颜色/背景图片、边框大小/颜色/样式、内边距，阴影，边框弧度可配置
• 按钮文字：文本字体风格/样式/大小/粗细，文本对齐方式（水平）
• 按钮ICON：样式，显示位置（左/右），排版间隔（与文字）
• 按钮状态：常规/悬浮/激活/禁用（修改属性参考按钮块与按钮文字）
• 排版方案：若多例，需要考虑排版方案（横向或纵向），列项间隔
• tootip信息：信息文本字体风格/样式/大小/粗细/行间距，背景颜色，内边距，边框弧度，边框大小/颜色/样式（可选配）
• 交互反馈：如水波纹动画效果
• 实现功能：单/多例交互功能

1.3.4 事件交互

• 用户点击事件

1.4 单复选框/多例复选框（checkBox/checkBoxGroup）

1.4.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.4.2 组件要素

• 选择框
• 显示文本

1.4.3 实现要求

• 选择框：背景颜色、边框大小/颜色/样式、边框弧度、排版间隔（与文字）可配置
• 显示文本：文本字体风格/样式/大小/粗细，文本对齐方式（水平）
• 排版方案：若多例，需要考虑排版方案（横向或纵向（可配置）），列项间隔
• 交互反馈：如水波纹动画效果
• 实现功能：单/多例交互功能

1.4.4 事件交互

• 选项选中状态变更事件

• 取消事件（一般用于单复选框）

1.5 单选框/多例单选框（radioBox/radioBoxGroup）

1.5.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.5.2 组件要素

• 选择框
• 显示文本

1.5.3 实现要求

• 选择框：背景颜色、边框大小/颜色/样式、边框弧度、排版间隔（与文字）可配置
• 显示文本：文本字体风格/样式/大小/粗细，文本对齐方式（水平）
• 按钮状态：常规/激活/禁用（修改属性参考选择框与显示文本）
• 排版方案：若多例，需要考虑排版方案（横向或纵向（可配置）），列项间隔
• 交互反馈：如水波纹动画效果
• 实现功能：单/多例交互功能

1.5.4 事件交互

• 选项选中状态变更事件

1.6 开关（switch/switchGroup）

1.6.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.6.2 组件要素

• 开关
• 显示文本

1.6.3 实现要求

• 开关配置：背景颜色，边框大小/颜色/样式、边框弧度、正反色块颜色/大小,排版间隔（与文字）（可配置）
• 显示文本：文本字体风格/样式/大小/粗细，文本对齐方式（水平）
• 排版方案：若多例，需要考虑排版方案（横向或纵向（可配置）），列项间隔
• 交互反馈：如水波纹动画效果
• 实现功能：单/多例交互功能

1.6.4 事件交互

• 选项选中状态变更事件

1.7 输入框（input/inputButton/inputSearch）

1.7.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.7.2 组件要素

• 输入框input
• 输入框icon 选配
• 输入框提示文本 选配
• 搜索确认按钮 （按钮文字/icon 选配） 选配
• 搜索结果列表 选配

1.7.3 实现要求

• 输入框：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 输入框icon:样式/大小可配置
• 输入框提示文本:文本字体风格/样式/大小/粗细
• 搜索确认按钮：背景颜色/背景图片，边框大小/颜色/样式，内边距，阴影，边框弧度，排版间隔（与输入框）（可配置）/（可选配）
• 搜索确认按钮文字：文本字体风格/样式/大小/粗细
• 搜索确认按钮ICON：ICON样式，大小，颜色可配置
• 搜索列表：参考滚动列表实现配置
• 实现功能：输入/提交/搜索

1.7.4 事件交互

• 文本变更事件
• 按钮确认事件
• 搜索结果列点击事件

1.8 选择器（combox）

1.8.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.8.2 组件要素

• 输入框input
• 输入框提示文本 选配
• 下拉按钮 （按钮文字/icon 选配）
• 下列选择列表

1.8.3 实现要求

• 输入框：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 输入框提示文本:文本字体风格/样式/大小/粗细
• 下拉按钮：背景颜色/背景图片，边框大小/颜色/样式，内边距，阴影，边框弧度，文本字体风格/样式/大小/粗细,排版间隔（与输入框）可配置
• 按钮ICON：ICON样式，大小，颜色可配置
• 下拉列表：文本字体风格/样式/大小/粗细，排列方案（一行几列），分割边线，选项激活高亮（背景/文字）
• 实现功能：单/复选（可选配），检索功能，选中项输入框可呈现（复选模式下：1、选中文本带移除功能，2、需要确认按钮）

1.8.4 事件交互

• 选项选中状态变更事件
• 移除事件

1.9 选择器（comboxTree）

1.9.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.9.2 组件要素

• 输入框input
• 输入框提示文本 选配
• 下拉按钮 （按钮文字/icon 选配）
• 下列树型列表

1.9.3 实现要求

• 输入框：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 输入框提示文本:文本字体风格/样式/大小/粗细
• 下拉按钮：背景颜色/背景图片，边框大小/颜色/样式，内边距，阴影，边框弧度，排版间隔（与输入框）
• 按钮ICON：ICON样式，大小，颜色可配置
• 树型列表：文本字体风格/样式/大小/粗细，选项激活高亮（背景/文字）
• 实现功能：单/复选（可选配），检索功能，选中项输入可呈现（复选模式下：1、选中文本带移除功能，2、需要确认按钮）

1.9.4 事件交互

• 选项选中状态变更事件

1.10 树型选择器（tree）

1.10.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.10.2 组件要素

• 包裹容器
• 树型列表

1.10.3 实现要求

• 包裹容器：背景色块、内距距、边框大小/颜色/样式可配置
• 树状列表：文本字体风格/样式/大小/粗细，选项激活高亮（背景/文字）
• 实现功能：单/复选（可选配）

1.10.4 事件交互

• 选项选中状态变更事件

1.11 时间选择器（datePicker）

1.11.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.11.2 组件要素

• 输入框
• 输入框提示文本 选配
• 输入框icon
• 确认按钮 （按钮文字/icon 选配）

1.11.3 实现要求

• 输入框：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式
• 输入框icon:样式/大小
• 输入框提示文本:文本字体风格/样式/大小/粗细
• 时间列表:文本字体风格/样式/大小/粗细（常规/hover/激活），时间块间隔，边框大小/颜色/样式等，其它参考各大UI库时间样式
• 实现功能：时间拾取（若需精确到秒，需要提供时分秒选择列表），时间格式化

1.11.4 事件交互

• 时间拾取事件

1.12 时间区间选择器（dateRangePicker）

1.12.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.12.2 组件要素

• 输入框
• 输入框icon 选配
• 确认按钮 （按钮文字/icon 选配）
• 时间列表

1.12.3 实现要求

• 输入框：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 输入框icon:样式/大小可配置
• 时间列表:文本字体风格/样式/大小/粗细（常规/hover/激活），间隔，边框大小/颜色/样式等，其它参考各大UI库时间样式
• 确认按钮：背景颜色/背景图片，边框大小/颜色/样式，内边距，阴影，边框弧度，排版间隔（与输入框）可配置
• 实现功能：时间拾取（若需精确到秒，需要提供时分秒选择列表），时间格式化（可配置），时间开始时间不能小于结束时间校验

1.12.4 事件交互

• 时间拾取确认事件

1.13 分页器（pager）

1.13.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.13.2 组件要素

• 页号
• 页码
• 页号自定义输入框
• 上下页
• 当前页

1.13.3 实现要求

• 页号按钮：背景颜色、边框大小/颜色/样式，边框弧度，排版间隔（与文字），文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 页号自定义输入框:背景颜色、边框大小/颜色/样式，边框弧度，排版间隔，文本字体风格/样式/大小/粗细，获取焦点边框线/文本样式可配置
• 页码选择器：文本字体风格/样式/大小/粗细，排版间隔可配置
• 实现功能：数据分页，页号选号，页号自定义，页码选择 （分阶需可配置），上/下页

1.13.4 事件交互

• 页号点击事件
• 页码变更事件
• 页号自定义输入完成事年
• 上/下页点击事件

1.14 数字翻牌器（numSteps）

1.14.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.14.2 组件要素

• 数字
• 数字背景（选配）
• 前缀标识（选配）
• 后缀单位（选配）
• 前缀文本（选配）
• 千分符（选配）
• 小数符（选配）

1.14.3 实现要求

• 数字：文本字体风格/样式/大小/粗细
• 数字背景：图片路径，图片大小
• 前缀文本：字体风格/样式/大小/粗细，间隔，排版方案（左右/上下，注：与数字），文本对齐方式，超长文本换行处理（示例：2022年度国民生产总值）
• 前缀标识：字体风格/样式/大小/粗细，间隔（示例：人民币）
• 后缀单位：字体风格/样式/大小/粗细，间隔
• 千分符：字体风格/样式/大小/粗细，间隔
• 小数符：字体风格/样式/大小/粗细，间隔
• 实现功能：数字变化滚动动画（两种），千分位，精确小数点位数，数字背景图适配等等

1.14.4 事件交互

• 数据值变更事件
• 点击事件

1.15 趋势指示器（trend）

1.15.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.15.2 组件要素

• 前缀文本 （选配）
• 上升下降标识符
• 趋势数值
• 后缀单位（选配）
• 千分符（选配）
• 小数符（选配）

1.15.3 实现要求

• 前缀文本：字体风格/样式/大小/粗细，间隔，排版方案（左右/上下，注：与数字），文本（水平/垂直）对齐方式，超长文本换行处理 （示例：2022年度国民生产总值）
• 上升下降标识符：图片路径，图片大小
• 趋势数值：字体风格/样式/大小/粗细，间隔
• 后缀单位：字体风格/样式/大小/粗细，间隔
• 千分符：字体风格/样式/大小/粗细，间隔
• 小数符：字体风格/样式/大小/粗细，间隔
• 实现功能：数字变化上升下降标识符变化动画且颜色适配（如：上升红色，下降绿色） ，千分位，精确小数点位数

1.15.4 事件交互

• 数据值变更事件
• 点击事件

1.16 图片（image）

1.16.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.16.2 组件要素

• 图片
• 图片链接（选配）

1.16.3 实现要求

• 图片：图片地址（位图/svg）
• 实现功能：图片交互(常规/激活/hover，图片可替换【注：需要配置过渡动画】)

1.16.4 事件交互

• 鼠标hover（进/入）事件
• 点击事件

1.17 背景色块（background）

1.17.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.17.2 组件要素

• 背景色块
• 激活高亮样式

1.17.3 实现要求

• 背景色块：背景颜色/图片，边框大小/颜色/样式（颜色支持浙变），边框弧度
• 实现功能：模块激活响应反馈（响应动画:如边线动画、水波纹）

1.17.4 事件交互

无

1.18 图例列表（legends）

1.18.1 通用实现

• 交互事件功能需要与蓝图事件集成

1.18.2 组件要素

• 图例ICON
• 图例选择框（选配）
• 图例说明文本

1.18.3 实现要求

• 图例ICON：icon形状/图片，icon大小
• 图例选择框：选择框（checkbox/radio）大小，背景颜色（常规/激活），边框大小/颜色/样式（常规/激活）
• 图例说明文本：字体风格/样式/大小/粗细
• 实现功能：单/复选功能，排版支持（自定义行列设置/自适应）

1.18.4 事件交互

• 选项选中变更事件