> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 分组

> 分组组件介绍，包括分组的定义、使用场景以及属性设置如显示头部、图标等。还涵盖了PC端和移动端的具体配置选项，样式配置部分则介绍了源码编辑、状态、显示模式、Margin及Padding等内容。

## 1. 分组组件介绍

### 1.1 什么是分组

分组是一个官方推荐的区块管理器，用于将功能相似的模块，聚集在一个分组中

效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363393289-bed21a5e-af04-4803-a37e-065e56abe8f4.png)
</Frame>

分组组件

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363542688-24b1220f-f216-463e-ab41-4e8033f1768a.png)
</Frame>

在分组内添加组件

### 1.2 使用场景

一个页面中有多个独立模块需要展示（例如商店里面的产品、货架、价格等，一种产品放入一个模块展示）且每个模块中有多个表单组件，则可将每个模块放置进一个分组

## 2. 属性

### 2.1 显示头部

关闭开关则用户配置头部的设置选项均自动收起

显示头部和隐藏头部，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363576988-5b06b1ab-df37-4c7b-b699-2b660680c9f2.png)
</Frame>

显示头部

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363668984-6c3aea26-b224-436d-bf35-17d4d64a7b9c.png)
</Frame>

隐藏头部

#### 2.1.1 分组标题

显示此分组的名称，字数较多时会显示不全，**仅显示前 9 个汉字**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1641792847966-a65c9374-da19-4fe5-a8d1-aed25e6dfa3c.png)
</Frame>

#### 2.1.2 图标

可以给分组设置图标，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363748142-9aa9d24f-1222-451c-9577-d872b3d3db66.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363793802-734ae456-b88d-4928-8e9d-f3047bc63285.png)
</Frame>

设置图标

#### 2.1.3 用户提示

指分组后面加一个小「i」提示：点击查看重点说明，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639363840662-3e3274a4-91df-4b94-a2f1-6c70fd9a9ee2.png)
</Frame>

提示、注意事项

#### 2.1.4 头部分割线

开关关闭，则隐藏头部分割线，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364399287-5e948a8d-6708-48d3-8e94-6ed291af07cf.png)
</Frame>

头部分割线

### 2.2 PC 端设置

指分组组件在表单的页面布局展示，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364426676-bcfa72c2-0b9c-4a38-b962-af6d26710a23.png)
</Frame>

#### 2.2.1 显示边框

分组组件外围会有边框，开启与关闭的效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364594139-b569a524-66a1-4388-b772-bbe876310e3f.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364649133-13117a7d-953b-4632-97be-c8c63fb38683.png)
</Frame>

显示边框

#### 2.2.2 外边距

分组组件的外围变宽、变窄，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364688937-63df09ad-cd98-48cd-b34f-a7f50f44ae1f.png)
</Frame>

#### 2.2.3 内边距

分组组件内部变宽、变窄，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364827849-e88a82e5-20bb-4a78-b7f1-f50b527e96b3.png)
</Frame>

内边距的开启与关闭

### 2.3 Mobile 端设置

类似于 PC 端设置，此配置仅对移动端生效，设置同 PC 端设置，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364849983-50f9f7cb-2861-4d90-8352-218d590a81d4.png)
</Frame>

## 3. 样式

对于分组的样式配置，通常直接使用 block 的显示模型即可

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364915140-6e91669d-4ec8-4cb8-bb1a-dba2ace4756e.png)
</Frame>

样式配置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639364958104-545eacd2-e179-43b8-85ec-9d51abf3bce9.png)
</Frame>

### 3.1 源码编辑

即以 CSS 源代码方式进行样式编辑，当前 div 默认使用 flex 布局；

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365027421-82ccd180-7ab4-4004-857b-373484b55fd8.png)
</Frame>

### 3.2 状态

以传统 PC 端的组件状态进行分组设置：

* 默认：正常状态

* hover: 鼠标浮动在组件热区，且未产生点击行为

* focus：页面元素处于光标焦点位置

* active: 页面元素处于选中激活状态

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365064214-73da3b91-807f-46ef-bf5e-4a2907896a81.png)
</Frame>

**注：**

* 不同的状态设置，默认状态会覆盖其他 3 种状态

* 而 hoverocusactive 3 种状态的配置则相互隔离，互不影响

* 体现在 CSS 中，是独立的选择器设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612078786131-c1fd16e4-ff2e-4489-af1f-8320a3652cd7.png)
</Frame>

### 3.3 显示

对应 CSS 的 display 模式：

* block：盒子模型

* inline-block：行内盒子模型

* inline：行内模型

* flex：弹性布局模型

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365123092-8774c6c5-49f9-4084-8085-abf262881c34.png)
</Frame>

以上4种均为标准前端 CSS 布局模型，这里不做展开介绍，有需要的话，可以参考 [**w3c对应文档**](https://www.runoob.com/css/css-website-layout.html)

举例，flex 比较常用的是

* 使用 flex 布局，按需采用横向排列、或纵向排列；
* 然后设置水平 + 垂直 均居中对齐，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365201934-72a7c934-315b-4153-ba62-99a0c8a3be29.png)
</Frame>

### 3.4 Margin 及 Padding

Margin 指盒子模型中的，距离其他节点元素的距离；

Padding 指盒子模型中的，距离其内部元素的留白距离，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365247219-e22deb23-73a3-4da4-86bf-31e6e4dd2c72.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365312999-32cc4abf-0bb7-49a0-bb3a-c04deb1c88fa.png)
</Frame>

### 3.5 文字

设置文字之后，影响的分组里面的组件标题，可自定义，也可直接选择文字标题，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365372365-c8da04c7-c1f6-414d-9686-7ccf983f4adc.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365399120-867088d9-fc80-4cd1-8fd0-05878fe26946.png)
</Frame>

### 3.6 背景

可自主选择系统自带的颜色，也可使用本地图片背景上传，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365432122-0eedf82a-fe89-440b-a8fd-24631f71240b.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365463730-51c4484e-d8e3-45ea-a120-afcfeea25410.png)
</Frame>

### 3.7 边框

指设置分组组件的边框效果；

同时支持设置圆角大小，圆角指组件的四个角的弧度，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365523275-99957c32-16bb-44d6-991d-671eb1bdb8d8.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639365554392-c778b31a-bc8b-4f8b-a991-e22811fc6713.png)
</Frame>

### 3.8 阴影

设置组件的阴影投影，通过 xy 设置方向，通过 blur 和 spread 设置阴影

### 3.9 不透明度

设置组件模块的整体透明度效果，范围 0\~100，默认为 100，0 为完全透明

### 3.10 鼠标手势

* 选择 pointer ，则当鼠标浮动在区块上方时，会出现小手标志
* 选择 default ，则当鼠标浮动在区块上方时，会出现箭头标志