# 自定义组件分组配置说明（snippets）
"snippets"是物料协议文件中的核心配置项，用于定义组件在物料面板中的分组及初始数据。通过该配置，可以将组件按功能或类型进行分类，并为每个组件提供初始配置信息。
#### 分组基础配置
每个"snippets"数组元素对应物料面板中的一个分组（如"导航类型"），核心配置项如下所示：
表1snippets 
| 属性名称     | 类型                                                                                                                                                                               | 说明                                                                                                                    |
|:---|:---|:---|
| group    | String                                                                                                                                                                           | 分组唯一标识符。必须与[自定义组件配置说明（components）](https://support.huaweicloud.com/usermanual-idme/idme_ui_0077.html)中的"group"字段完全一致。 |
| label    | { zh_CN: String; en_US: String; } | 分组显示的名称。其中，"zh_CN"为中文名称（必填），"en_US"为英文名称（可选）。                                                                         |
| children | Array\<SnippetItem\>                                                                                                                                                             | 该分组下的组件列表，每个元素对应一个组件的展示配置，请参见[表2]。                                 |
   
#### 分组内组件配置
"SnippetItem"数组中的每个对象对应分组下的一个组件，定义了组件在物料面板中的显示样式和初始配置，核心配置如下：
 表2SnippetItem 
| 属性名称        | 类型                                                                                                                                                                           | 说明                                                                                                                                                    |
|:---|:---|:---|
| name        | { zh_CN: String; en_US: String; } | 组件在物料面板中显示的名称。其中，"zh_CN"为中文名称（必填），"en_US"为英文名称（可选）。                                                                                                   |
| icon        | String                                                                                                                                                                       | 组件在物料面板中显示的图标。                                                                                                                                        |
| snippetName | String                                                                                                                                                                       | 组件的标签名，必须与[表1](https://support.huaweicloud.com/usermanual-idme/idme_ui_0077.html#ZH-CN_TOPIC_0000002492457356__table076141119716)中的"component"字段完全一致。 |
| schema      | Object\<SnippetSchema\>                                                                                                                                                      | 组件的默认属性配置，可定义组件拖入画布时的初始属性、插槽等，请参见[组件默认配置（SnippetSchema）]。                                       |
   
 #### 组件默认配置（SnippetSchema）
"schema"用于配置组件拖入画布时的初始状态，支持设置默认属性、子组件、插槽等，接口定义如下：
```
interface SnippetSchema {
    componentName: String;  // 组件的名称，可选。
    props: Record<string, any>; // 组件属性的默认值，可选。
    children: Array<SnippetSchema>; // 组件的子组件，可选。
}
```
#### 插槽默认开启配置示例
如果组件需在拖入画布时默认开启插槽，"SnippetItem"的schema需按以下格式配置：
```
{
    "componentName": "MyCustomComponent", // 组件名称
    "props": {}, // 组件的props，用于配置默认值
    "children": [
        {
            "componentName": "Template", // 固定为"Template"
            "props": {
                "slot": "定义的slot名称", // 插槽名称，必须填
            },
            "children": [
                {
                    "componentName": "div" // 插槽的容器标签
                }
           ]
        }
    ]
}
```
#### 分组配置示例
以下是"导航类型"分组的完整配置示例，包含时间线组件的展示和初始属性配置：
```
{
  "group": "navigation",
   "label": {
    "zh_CN": "导航类型"
  },
  "children": [
    {
      "name": {
        "zh_CN": "时间线"
      },
      "icon": "timeline",
      "screenshot": "",
      "snippetName": "TinyTimeLine",
      "schema": {
        "componentName": "TinyTimeLine",
        "props": {
          "active": "2",
          "data": [
            {
              "name": "已下单"
            },
            {
              "name": "运输中"
            },
            {
              "name": "已签收"
            }
          ],
          "vertical": false
        }
      }
    }
  ]
}
```