设计器新增组件说明

新需求调研说明

一.Transfer穿梭框

1.1简介

Transfer穿梭框，双栏穿梭选择框的样式，用直观的方式在两栏中移动元素，完成选择行为。选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。 其中，左边一栏为 source，右边一栏为target，两栏间相互穿梭这两个概念。

1.2示例图

1.3布局说明

区域1：待选列表source

区域2：已选列表target

区域3：选择按钮

区域4：排序按钮

1.3样式说明

·带搜索框

·Locked Items锁定

·With Reordering排序

·单选多选

·层级数据（可控是否支持父项穿梭）

1.4交互说明

·交互事件

选中触发：点击空白单元格，弹出操作按钮；

展开触发：点击操作按钮，弹出窗口；

收起触发：点击其他区域触发该下拉收起；

1.5推荐理由

用直观的方式组织链接信息

二.Accordion风琴面板/Collapse折叠面板

2.1简介

通过切换内容展示垂直堆叠的集合部分内容，作为面板可嵌套内部内容。

2.2示例图

2.3 布局说明

·区域1：面板标题区域

·区域2：展开收起按钮

·区域3：面板主体内容区域

·区域4：区域间隔

2.4 属性说明

·面板属性

属性名	描述
selected	如果设置为true将展开面板。
collapsible	如果设置为true将显示折叠按钮。

2.5交互说明

· 交互事件：

（1）手风琴，每次只打开一个面板。默认打开第一个。

展开触发：在面板区域1被选中的时候触发展开。当前只展开一项，默认展开第一项；

展开并收起触发：点击区域2（或其他区域）收起当前项，并展开点击项；

收起触发：或点击区域1（已展开项）触发该项收起。已展开项）触发该项收起。

（2）折叠面板，可以同时展开多个面板，这个例子默认展开了第一个。

展开触发：在面板区域1被选中的时候触发展开，默认展开第一项；

展开触发：点击区域2（或区域3）保留当前项展开项，并展开点击项2（或3）；

收起触发：点击区域1（已经已展开项）触发该项收起。

·交互状态：

·加载：组件内容加载，我们想通过显示一个微调器来向用户提供反馈。

2.6推荐理由

信息内容展示多样化，适用于层级内容展示。

三.Tile 瓷片控件

3.1简介：磁贴是一个容易识别的可视面板。

3.2示例图

3.3布局说明：

通过将磁贴“固定”到视图，可以自定义在界面上显示哪些磁贴。

磁贴可以向用户传送信息，方法是显示使用可选计数器.

使用了固定大小和颜色的可选磁贴

3.4属性

·左图显示了磁贴正面的类似内容：

磁贴正面的属性为：标题，指示标题的字符串，标题必须适合单行文本并且不应该比实际磁贴宽；

BackgroundImage显示在磁贴正面的图像，建议在磁贴正面始终拥有背景图像；

计数（徽章），从 1 到 99 的整数值，如果未设置“计数”的值或者设置为 0，则不会在磁贴上显示圆形图像和值。

·右图图显示了磁贴背面的类似内容：

磁贴背面的属性为：BackTitle，显示在磁贴背面底部的字符串；

BackTitle 必须适合单行文本并且不应该比实际磁贴宽；

BackBackgroundImage，显示在磁贴背面的图像；

BackContent，显示在磁贴背面中心的字符串。 

磁贴通过在磁贴的“正面”和“背面”之间翻转来显示信息。如果未设置磁贴背面的任何属性，则磁贴不会翻转并且将只显示磁贴的正面。

3.5交互说明

动作：用户可以自定义添加、删除磁贴，拖拽改变磁贴位置。

磁贴可自适应缩放。（一系列统一的比例系数）

动效：有一个默认的动效，磁贴滑动和翻转。

触发：点击或者悬停，磁贴滑动和翻转。释放鼠标，回到正面。

3.6移动

3.7推荐理由

动态磁贴的存在弱化了图标设计，突出了内容的铺排，解决了入口过多会造成寻找和定位的困难，可以帮助用户管理好常用的业务模块。

四.Card 卡片

4.1简介

通用卡片式面板。

4.2示例图

4.3布局说明

卡片布局，让多个组件共享同一个显示空间，共享空间的组件之间的关系就像一叠牌，组件叠在一起。

内嵌，可以嵌套多个卡片，可以放在普通卡片内部，展示多层级结构的信息。

·卡片由3个部分组成，一个标题，一个正文和一个页脚。页眉和页脚有限制，但主体部分可以容纳相关信息的任何布局。

·卡片头有图标，标题和动作。图标和标题位于左侧，而动作行位于卡片头的右侧。

卡片标题的动作行通常包含用户正在处理的对象的单个动作，例如创建，编辑或删除。如果有多个动作，则会使用动作溢出菜单。

·卡片页脚是可选的，通常是“查看全部”链接，将用户带到对象列表视图。

·卡体部分，卡体可以容纳任何布局或设计。

4.4交互说明

·卡片内容为空时：默认情况下它会被折叠为主体和页脚；或者，可以通过使用卡体中的图示来表示没有数据的卡。

卡片的加载：当卡片实例化并加载时，我们想通过显示一个微调器来向用户提供反馈。数据加载完成后，可以从卡组件中移除微调器。

4.5推荐理由

信息内容展示多样化。

五.组合按钮

5.1简介

具有一组三个按钮项，分别为第一项操作、第二项操作、第三项操作。多余单个产生下拉项每个下拉选项具有点击事件。

5.2示例图

5.3布局说明

5.4交互说明

·样式说明：

三项以外下拉显示

·交互事件：

选中触发：点击区域1按钮触发该选项按钮；

展开触发：点击区域2展开下拉；

收起触发：点击其他区域触发该下拉收起；

选中触发：点击区域3按钮触发该选项按钮。

·交互状态：

5.5移动

类似现有移动通过下拉框的停靠样式

5.6推荐理由

下拉按钮的样式拓展

六.PieMenu圆形辐射菜单

6.1简介

一个圆形结构的层级菜单，可以在一个空间内显示多个菜单项

6.2示例图

6.3布局说明

区域1：整个RadialMenu的外形以及背景

区域2：RadialMenuItemsPresenter-用来展示各个菜单

区域3：RadialMenuNavigationButton-中间导航的按钮

6.4属性说明

菜单背景RadialMenu：

圆心角：控制每个内部区域的角度

展开项数：决定形状，提供范围

规则说明：逆时针旋转(圆心角*导航项数-180)/2度确保两边相对称（非圆形）

菜单项RadialMenuItemsPresenter：

RadialMenuItem -最基础的显示文字，图片等等

RadialColorMenuItem-用于显示颜色

RadialNumericMenuItem-用于显示数字，

它的子集是RadialNumericMenuChildrenItem，是一个内部的类。

中心按钮RadialMenuNavigationButton：Center Selected 

6.5交互说明

·交互事件：

展开触发：点击区域1按钮触发展开菜单；

展开触发/选中触发：若为多层次菜单点击区域2展开下一层级菜单，若为单层级则选中；

收起触发：点击区域3或菜单外其他区域触发收起菜单；

选中触发：点击区域3按钮触发该选项按钮。

6.6移动说明

6.7推荐理由

丰富菜单样式

七.Scheduler 日程管理

7.1简介

按照日历形式展示数据的容器。

7.2示例图

7.3布局说明

自由编辑任务：可以自由的插入或编辑任务，支持内联编辑模式.

也提供高级编辑器，可以在编辑器中添加描述、设置循环、关联资源等等。

可以创建一次发生、全天发生或循环发生的，支持提醒、标签和可用性状态。并且所有的编辑选项都可以进行自定义。

支持多种任务视图：选择日历的显示方式，有Day, Multi-day, Week, Work Week, Month, Timeline 和 Agenda七种方式可以选择。时间线查看时水平显示日期，垂直排列组。

7.4交互说明

试图切换：日、周、月、列表

·新建：

选中触发：点击空白单元格，弹出操作按钮；

展开触发：点击操作按钮，弹出窗口；

收起触发：点击其他区域触发该下拉收起；

·下拉：

选中触发：点击按钮触发该选项按钮；

展开触发：点击下拉按钮展开下拉；

收起触发：点击其他区域触发该下拉收起；

选中触发：点击下拉选项触发该选项按钮；

默认状态、选择状态、不可选状态

简洁模式：用于嵌套在空间有限的容器中。

其他：支持键盘操作，日历应用基本上都可以用键盘进行操作，比如跳转到其他视图、创建新项目、打开当前项目等等。

7.6推荐理由

目前平台没有，推荐用于办公或任务协作类场景。

八.Docked Composer停靠弹出窗

8.1简介

停靠弹出窗是一个弹出于最前的弹出窗，允许用户继续使用应用程序来完成任务或展开/折叠停靠弹出窗口操作，一般用于消息弹出提醒等。

8.2示例图

8.3布局说明

区域1：工具栏操作按钮

区域2：标题（label+icon）

区域3：内容区域

区域4：操作栏

8.4交互说明

·交互事件：

展开触发：点击区域1按钮触发该选项按钮点击展开或shouq面板，点击最小化，点击关闭面板;

选中触发：点击区域2按钮触发该选项按钮。

九.Gantt Editor甘特图

9.1简介

甘特图以图示通过活动列表和时间刻度表示出特定项目的顺序与持续时间。

9.2示例图

9.3布局说明

·分组布局

通过使用数据域对它们分组实现，多层次的分组。

汇总组时，使用组标题和汇总条。

可以排序、折叠组。

· 分级布局

使用分级布局，通过数据中得到的结构化代号域，显示活动/事件顺序。

各层次自动缩进，单击鼠标就可以展开或折叠它们。

9.4属性说明

图表中的每个活动均显示为条形图

图表的X轴是一个时间尺度

图表的Y轴是一个包含活动名称和其他活动相关信息的网格。

网格的第一列是呈现任务层次结构的树。

9.5交互说明

数据节点的任意调整拖放，通过拖拽改变甘特图的事件时间和周期。

鼠标拖拽，调整列宽。

点击收拢/展开节点组。

鼠标悬停显示Tooltip

工具栏点击/悬停展开操作。

9.6推荐理由

应用场景： 项目管理，图形化概要，易于理解。

十. Split View侧滑面板

10.1简介

侧边列表，可以隐藏或展开，对整个界面起到导航作用，内容多以列表形式展现

10.2示例图

10.3布局说明

区域1：折叠区域

区域2：展开区域

10.4属性说明

弹出方向

顶部	左侧
底部	右侧

10.5交互说明

toggle*(开关)折叠状态，展开状态

默认状态、选择状态、不可选状态

10.6移动端说明

·属性

Style：侧滑样式，分别是Drawer(抽屉式)即覆盖主布局的样式、Sliding（拉伸式）、Toggle（切 换式）有缩放特效。默认    为Drawer。 

SlipPosition：侧滑布局所在位置，分别是Left和Right。

10.7推荐理由

多层级内容的不同展示。