分组
未升级到新版信息架构的组织,请 点此查看 使用手册
1. 分组组件介绍
1.1 什么是分组
分组是一个官方推荐的区块管理器,用于将功能相似的模块,聚集在一个分组中
效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363393289-bed21a5e-af04-4803-a37e-065e56abe8f4.png)
分组组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363542688-24b1220f-f216-463e-ab41-4e8033f1768a.png)
在分组内添加组件
1.2 使用场景
一个页面中有多个独立模块需要展示(例如商店里面的产品、货架、价格等,一种产品放入一个模块展示)且每个模块中有多个表单组件,则可将每个模块放置进一个分组
2. 属性
2.1 显示头部
关闭开关则用户配置头部的设置选项均自动收起
显示头部和隐藏头部,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363576988-5b06b1ab-df37-4c7b-b699-2b660680c9f2.png)
显示头部
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363668984-6c3aea26-b224-436d-bf35-17d4d64a7b9c.png)
隐藏头部
2.1.1 分组标题
显示此分组的名称,字数较多时会显示不全,仅显示前 9 个汉字
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641792847966-a65c9374-da19-4fe5-a8d1-aed25e6dfa3c.png)
2.1.2 图标
可以给分组设置图标,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363748142-9aa9d24f-1222-451c-9577-d872b3d3db66.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363793802-734ae456-b88d-4928-8e9d-f3047bc63285.png)
设置图标
2.1.3 用户提示
指分组后面加一个小「i」提示:点击查看重点说明,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363840662-3e3274a4-91df-4b94-a2f1-6c70fd9a9ee2.png)
提示、注意事项
2.1.4 头部分割线
开关关闭,则隐藏头部分割线,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364399287-5e948a8d-6708-48d3-8e94-6ed291af07cf.png)
头部分割线
2.2 PC 端设置
指分组组件在表单的页面布局展示,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364426676-bcfa72c2-0b9c-4a38-b962-af6d26710a23.png)
2.2.1 显示边框
分组组件外围会有边框,开启与关闭的效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364594139-b569a524-66a1-4388-b772-bbe876310e3f.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364649133-13117a7d-953b-4632-97be-c8c63fb38683.png)
显示边框
2.2.2 外边距
分组组件的外围变宽、变窄,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364688937-63df09ad-cd98-48cd-b34f-a7f50f44ae1f.png)
2.2.3 内边距
分组组件内部变宽、变窄,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364827849-e88a82e5-20bb-4a78-b7f1-f50b527e96b3.png)
内边距的开启与关闭
2.3 Mobile 端设置
类似于 PC 端设置,此配置仅对移动端生效,设置同 PC 端设置,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364849983-50f9f7cb-2861-4d90-8352-218d590a81d4.png)
3. 样式
对于分组的样式配置,通常直接使用 block 的显示模型即可
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364915140-6e91669d-4ec8-4cb8-bb1a-dba2ace4756e.png)
样式配置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364958104-545eacd2-e179-43b8-85ec-9d51abf3bce9.png)
3.1 源码编辑
即以 CSS 源代码方式进行样式编辑,当前 div 默认使用 flex 布局;
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365027421-82ccd180-7ab4-4004-857b-373484b55fd8.png)
3.2 状态
以传统 PC 端的组件状态进行分组设置:
- 默认:正常状态
- hover: 鼠标浮动在组件热区,且未产生点击行为
- focus:页面元素处于光标焦点位置
- active: 页面元素处于选中激活状态
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365064214-73da3b91-807f-46ef-bf5e-4a2907896a81.png)
注:
- 不同的状态设置,默认状态会覆盖其他 3 种状态
- 而 hoverocusactive 3 种状态的配置则相互隔离,互不影响
- 体现在 CSS 中,是独立的选择器设置
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612078786131-c1fd16e4-ff2e-4489-af1f-8320a3652cd7.png)
3.3 显示
对应 CSS 的 display 模式:
- block:盒子模型
- inline-block:行内盒子模型
- inline:行内模型
- flex:弹性布局模型
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365123092-8774c6c5-49f9-4084-8085-abf262881c34.png)
以上4种均为标准前端 CSS 布局模型,这里不做展开介绍,有需要的话,可以参考 w3c对应文档
举例,flex 比较常用的是
- 使用 flex 布局,按需采用横向排列、或纵向排列;
- 然后设置水平 + 垂直 均居中对齐,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365201934-72a7c934-315b-4153-ba62-99a0c8a3be29.png)
3.4 Margin 及 Padding
Margin 指盒子模型中的,距离其他节点元素的距离;
Padding 指盒子模型中的,距离其内部元素的留白距离,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365247219-e22deb23-73a3-4da4-86bf-31e6e4dd2c72.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365312999-32cc4abf-0bb7-49a0-bb3a-c04deb1c88fa.png)
3.5 文字
设置文字之后,影响的分组里面的组件标题,可自定义,也可直接选择文字标题,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365372365-c8da04c7-c1f6-414d-9686-7ccf983f4adc.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365399120-867088d9-fc80-4cd1-8fd0-05878fe26946.png)
3.6 背景
可自主选择系统自带的颜色,也可使用本地图片背景上传,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365432122-0eedf82a-fe89-440b-a8fd-24631f71240b.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365463730-51c4484e-d8e3-45ea-a120-afcfeea25410.png)
3.7 边框
指设置分组组件的边框效果;
同时支持设置圆角大小,圆角指组件的四个角的弧度,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365523275-99957c32-16bb-44d6-991d-671eb1bdb8d8.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365554392-c778b31a-bc8b-4f8b-a991-e22811fc6713.png)
3.8 阴影
设置组件的阴影投影,通过 xy 设置方向,通过 blur 和 spread 设置阴影
3.9 不透明度
设置组件模块的整体透明度效果,范围 0~100,默认为 100,0 为完全透明
3.10 鼠标手势
- 选择 pointer ,则当鼠标浮动在区块上方时,会出现小手标志
- 选择 default ,则当鼠标浮动在区块上方时,会出现箭头标志
--------获取宜搭最新信息,欢迎关注我们--------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)