@opentiny/vue-docs 1.0.1 → 1.0.2

package/resources/pc/demo-config/en-US/tabs.json

@@ -31,6 +31,14 @@
     "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
     "demoId": "with-add"
   },
+  {
+    "title": "'More' icon slot",
+    "content": "<p>Customize more icons through <code>show-more-tabs</code> and <code>moreIcon</code> slots</p>\n",
+    "link": "tabs/custom-more-icon",
+    "component": "Tabs tab",
+    "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+    "demoId": "custom-more-icon"
+  },
   {
     "title": "The tab page can be closed.",
     "content": "<p>The <code>withClose</code> attribute specifies whether the tab page can be closed. In addition, the <code>close</code> event can be used to customize the logic for closing the tab page. </p>\n",
@@ -87,6 +95,14 @@
     "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
     "demoId": "stretch-wh"
   },
+  {
+    "title": "The tab page can be dragged.",
+    "content": "<p>Set the <code>drop-config</code> attribute, transfer the <code>Sortable</code> plug-in, enable the tab page drag function, and reorder the tab pages. </p>\n",
+    "link": "tabs/tabs-draggable",
+    "component": "Tabs tab",
+    "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+    "demoId": "tabs-draggable"
+  },
   {
     "title": "add event",
     "content": "<p>The <code>add</code> event is triggered when the Add button is clicked to add a tab page</p>\n",
@@ -142,5 +158,13 @@
     "component": "Tabs tab",
     "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
     "demoId": "show-different-grid-data"
+  },
+  {
+    "title": "Level-2 tab",
+    "content": "Nested tab",
+    "link": "tabs/tabs-second-layer",
+    "component": "Tabs tab",
+    "findIntroStr": "Separate data sets that are associated with content but belong to different categories.",
+    "demoId": "tabs-second-layer"
   }
-]
+]

package/resources/pc/demo-config/en-US/tag.json

@@ -55,6 +55,22 @@
     "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
     "demoId": "closeable"
   },
+  {
+    "title": "Disabled",
+    "content": "<p>You can set <code>disabled</code> to disable the tag. </p>\n",
+    "link": "tag/disabled",
+    "component": "Tag",
+    "findIntroStr": "Tag label component, used to mark transaction attributes and dimensions",
+    "demoId": "disabled"
+  },
+  {
+    "title": "Icon label (default slot)",
+    "content": "For details, see the following example.",
+    "link": "tag/slot-default",
+    "component": "Tag",
+    "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+    "demoId": "slot-default"
+  },
   {
     "title": "Click Event",
     "content": "For details, see the following example.",
@@ -71,4 +87,4 @@
     "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
     "demoId": "tag-event-close"
   }
-]
+]

package/resources/pc/demo-config/zh-CN/button-group.json

@@ -1 +1,98 @@
-[{"title":"基本用法","content":"<p>通过 <code>v-model</code> 设置默认选中的按钮，并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮，但不能进行双向绑定。</p>\n","link":"button-group/base","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"base"},{"title":"按钮组数据","content":"<p>通过 <code>data</code> 属性设置按钮组数据，对象中的 text 为按钮显示文本，value 用于双向绑定时指定的值。</p>\n","link":"button-group/data","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"data"},{"title":"设置组件大小","content":"<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code></p>\n","link":"button-group/size","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"size"},{"title":"禁用状态","content":"<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n","link":"button-group/disabled","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"disabled"},{"title":"朴素按钮","content":"<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n","link":"button-group/plain","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"plain"},{"title":"数据字段映射","content":"<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n","link":"button-group/text-value-field","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"text-value-field"},{"title":"是否显示更多按钮","content":"<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据，可显示更多按钮。</p>\n","link":"button-group/show-more","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"show-more"},{"title":"是否显示编辑按钮","content":"<p>设置 <code>show-edit</code> 属性值为 true ，可显示编辑按钮。</p>\n","link":"button-group/show-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"show-edit"},{"title":"编辑事件","content":"<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n","link":"button-group/event-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"event-edit"},{"title":"默认插槽","content":"<p>使用默认插槽的方式时，ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性，具体参考 Button 组件属性。</p>\n","link":"button-group/slot-default","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"slot-default"}]
+[
+    {
+        "title": "基本用法",
+        "content": "<p>通过 <code>v-model</code> 设置默认选中的按钮，并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮，但不能进行双向绑定。</p>\n",
+        "link": "button-group/base",
+        "component": " ButtonGroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "base"
+    },
+    {
+        "title": "按钮组数据",
+        "content": "<p>通过 <code>data</code> 属性设置按钮组数据，对象中的 text 为按钮显示文本，value 用于双向绑定时指定的值。</p>\n",
+        "link": "button-group/data",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "data"
+    },
+    {
+        "title": "设置组件大小",
+        "content": "<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code></p>\n",
+        "link": "button-group/size",
+        "component": " ButtonGroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "size"
+    },
+    {
+        "title": "禁用状态",
+        "content": "<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n",
+        "link": "button-group/disabled",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "disabled"
+    },
+    {
+        "title": "朴素按钮",
+        "content": "<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n",
+        "link": "button-group/plain",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "plain"
+    },
+    {
+        "title": "数据字段映射",
+        "content": "<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n",
+        "link": "button-group/text-value-field",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "text-value-field"
+    },
+    {
+        "title": "是否显示更多按钮",
+        "content": "<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据，可显示更多按钮。</p>\n",
+        "link": "button-group/show-more",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "show-more"
+    },
+    {
+        "title": "是否显示编辑按钮",
+        "content": "<p>设置 <code>show-edit</code> 属性值为 true ，可显示编辑按钮。</p>\n",
+        "link": "button-group/show-edit",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "show-edit"
+    },
+    {
+        "title": "编辑事件",
+        "content": "<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n",
+        "link": "button-group/event-edit",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "event-edit"
+    },
+    {
+        "title": "默认插槽",
+        "content": "<p>使用默认插槽的方式时，ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性，具体参考 Button 组件属性。</p>\n",
+        "link": "button-group/slot-default",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "slot-default"
+    },
+    {
+        "title": "多行",
+        "content": "<p>多行按钮组，超出最大宽度后，换行显示</p>\n",
+        "link": "button-group/button-group-multiple",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "多行",
+        "demoId": "button-group-multiple"
+    },
+    {
+        "title": "边框",
+        "content": "<p>设置有无边框，默认为true</p>\n",
+        "link": "button-group/border",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "边框",
+        "demoId": "border"
+    }
+]

package/resources/pc/demo-config/zh-CN/checkbox.json

@@ -1 +1,130 @@
-[{"title":"基本用法","content":"详细用法参考如下示例","link":"checkbox/basic-usage","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"basic-usage"},{"title":"复选框组","content":"<p>通过 <code>checkbox-group</code> 元素把多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。<code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>\n","link":"checkbox/checkbox-group","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"checkbox-group"},{"title":"配置式复选框组","content":"<p>提供 <code>options</code> 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。\n\n<code>options</code> 对象数组中包括三个字段：<code>label</code>、<code>text</code>、<code>events</code>。\n\n另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>checkbox</code>。还可以配置为 <code>button</code>，配置后复选框组将以按钮的形式展示。</p>\n","link":"checkbox/group-options","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"group-options"},{"title":"全选与半选","content":"<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>\n","link":"checkbox/indeterminate","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"indeterminate"},{"title":"可选数量限制","content":"<p>在 <code>checkbox-group</code> 上可通过 <code>min</code>、<code>max</code> 属性指定可勾选项目的最小、最大值。</p>\n","link":"checkbox/min-max","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"min-max"},{"title":"当前是否勾选","content":"<p>在 <code>checked</code> 当前是否勾选，通过 <code>disabled</code> 设置组件是否禁用。</p>\n","link":"checkbox/checked","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"checked"},{"title":"按钮形式复选框","content":"<p>在 <code>checkbox-group</code> 元素中嵌入 <code>checkbox-button</code> 即可实现按钮形式的复选框组。\n通过 <code>fill</code> 按钮形式的 Checkbox 激活时的填充色和边框色，默认值为：#409EFF。</p>\n","link":"checkbox/checkbox-button","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"checkbox-button"},{"title":"垂直布局","content":"<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>\n","link":"checkbox/vertical-checkbox","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"vertical-checkbox"},{"title":"动态生成复选框组","content":"<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>\n","link":"checkbox/dynamic-create-checkbox","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"dynamic-create-checkbox"},{"title":"内容超出时的提示信息","content":"<p>若复选框后的介绍文字超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。\n\n在 <code>checkbox</code> 元素上配置 <code>border</code> 属性为 true，可显示边框。</p>\n","link":"checkbox/content-overflow","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"content-overflow"},{"title":"文本","content":"<p>在 <code>text</code> 属性设置文本内容\n通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n","link":"checkbox/text","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"text"},{"title":"文本选择","content":"<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n","link":"checkbox/button-chek-box","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"button-chek-box"},{"title":"尺寸","content":"<p>当复选框为按钮形式时，通过 <code>size</code> 属性可以设置按钮复选框的尺寸，可选项有 medium、small、mini。\n\n在 <code>checkbox-button</code> 上设置 <code>disabled</code> 属性，将禁用某一个复选按钮，若在 <code>checkbox-group</code> 标签上配置 <code>disabled</code> 属性，则禁用所有复选按钮。</p>\n","link":"checkbox/with-border","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"with-border"},{"title":"事件","content":"<p>勾选值改变后将触发 <code>change</code> 事件。</p>\n","link":"checkbox/checkbox-events","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"checkbox-events"},{"title":"插槽","content":"<p>Checkbox 的内容</p>\n","link":"checkbox/checkbox-slot","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项，提供用户可在一组选项中进行多选。","demoId":"checkbox-slot"}]
+[
+  {
+    "title": "基本用法",
+    "content": "详细用法参考如下示例",
+    "link": "checkbox/basic-usage",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "basic-usage"
+  },
+  {
+    "title": "复选框组和垂直复选框组",
+    "content": "<p>通过 <code>checkbox-group</code> 元素把多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。<code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>\n",
+    "link": "checkbox/checkbox-group",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "checkbox-group"
+  },
+  {
+    "title": "配置式复选框组",
+    "content": "<p>提供 <code>options</code> 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。\n\n<code>options</code> 对象数组中包括三个字段：<code>label</code>、<code>text</code>、<code>events</code>。\n\n另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>checkbox</code>。还可以配置为 <code>button</code>，配置后复选框组将以按钮的形式展示。</p>\n",
+    "link": "checkbox/group-options",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "group-options"
+  },
+  {
+    "title": "全选与半选",
+    "content": "<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>\n",
+    "link": "checkbox/indeterminate",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "indeterminate"
+  },
+  {
+    "title": "可选数量限制",
+    "content": "<p>在 <code>checkbox-group</code> 上可通过 <code>min</code>、<code>max</code> 属性指定可勾选项目的最小、最大值。</p>\n",
+    "link": "checkbox/min-max",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "min-max"
+  },
+  {
+    "title": "当前是否勾选",
+    "content": "<p>在 <code>checked</code> 当前是否勾选，通过 <code>disabled</code> 设置组件是否禁用。</p>\n",
+    "link": "checkbox/checked",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "checked"
+  },
+  {
+    "title": "按钮形式复选框",
+    "content": "<p>在 <code>checkbox-group</code> 元素中嵌入 <code>checkbox-button</code> 即可实现按钮形式的复选框组。\n通过 <code>fill</code> 按钮形式的 Checkbox 激活时的填充色和边框色，默认值为：#409EFF。</p>\n",
+    "link": "checkbox/checkbox-button",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "checkbox-button"
+  },
+  {
+    "title": "垂直布局",
+    "content": "<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>\n",
+    "link": "checkbox/vertical-checkbox",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "vertical-checkbox"
+  },
+  {
+    "title": "动态生成复选框组",
+    "content": "<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>\n",
+    "link": "checkbox/dynamic-create-checkbox",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "dynamic-create-checkbox"
+  },
+  {
+    "title": "内容超出时的提示信息",
+    "content": "<p>若复选框后的介绍文字超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。\n\n在 <code>checkbox</code> 元素上配置 <code>border</code> 属性为 true，可显示边框。</p>\n",
+    "link": "checkbox/content-overflow",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "content-overflow"
+  },
+  {
+    "title": "文本",
+    "content": "<p>在 <code>text</code> 属性设置文本内容\n通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n",
+    "link": "checkbox/text",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "text"
+  },
+  {
+    "title": "文本选择",
+    "content": "<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n",
+    "link": "checkbox/button-chek-box",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "button-chek-box"
+  },
+  {
+    "title": "尺寸",
+    "content": "<p>当复选框为按钮形式时，通过 <code>size</code> 属性可以设置按钮复选框的尺寸，可选项有 medium、small、mini。\n\n在 <code>checkbox-button</code> 上设置 <code>disabled</code> 属性，将禁用某一个复选按钮，若在 <code>checkbox-group</code> 标签上配置 <code>disabled</code> 属性，则禁用所有复选按钮。</p>\n",
+    "link": "checkbox/with-border",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "with-border"
+  },
+  {
+    "title": "事件",
+    "content": "<p>勾选值改变后将触发 <code>change</code> 事件。</p>\n",
+    "link": "checkbox/checkbox-events",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "checkbox-events"
+  },
+  {
+    "title": "插槽",
+    "content": "<p>Checkbox 的内容</p>\n",
+    "link": "checkbox/checkbox-slot",
+    "component": " Checkbox 复选框",
+    "findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
+    "demoId": "checkbox-slot"
+  },
+  {
+    "title": "多行按钮",
+    "content": "<p>多行按钮组，超出最大宽度后，换行显示</p>\n",
+    "link": "checkbox/checkbox-button-multiple",
+    "component": "Checkbox check box",
+    "findIntroStr": "多行按钮",
+    "demoId": "checkbox-button-multiple"
+  }
+]

package/resources/pc/demo-config/zh-CN/form.json

@@ -33,7 +33,7 @@
   },
   {
     "title": "文本对齐",
-    "content": "<p>通过配置 <code>label-align</code> 属性, 设置是否文本对齐</p>\n",
+    "content": "<p>通过配置 <code>label-align</code> 属性, 设置是否文本对齐,通过配置 <code>label-position</code> 属性, 设置文本标签的位置</p>\n",
     "link": "form/label-align",
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
@@ -57,7 +57,7 @@
   },
   {
     "title": "表单尺寸",
-    "content": "<p>通过在 <code>tiny-form</code> 标签上设置 <code>size</code> 属性可以改变表单内组件尺寸；设置 <code>disabled</code> 属性可以改变表单内组件禁用状态</p>\n",
+    "content": "<p>通过在 <code>tiny-form</code> 标签上设置 <code>size</code> 属性可以改变表单内组件尺寸。</p>\n",
     "link": "form/size",
     "component": " FormItem 表单项",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
@@ -110,5 +110,13 @@
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
     "demoId": "form-row-col"
+  },
+  {
+    "title": "分组表单",
+    "content": "<p>将多个表单组合在一起</p>\n",
+    "link": "form/group-form",
+    "component": " Form 表单",
+    "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
+    "demoId": "group-form"
   }
 ]

package/resources/pc/demo-config/zh-CN/grid-event.json

@@ -1 +1,210 @@
-[{"title":"表头点击事件","content":"<p>在 <code>grid</code> 标签上配置 <code>header-cell-click</code> 可以监听到表头的点击事件</p>\n","link":"grid/event/header-click-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-header-click-event"},{"title":"表头双击事件","content":"<p>在 <code>grid</code> 标签上配置 <code>header-cell-dblclick</code> 可以监听到表头的双击事件</p>\n","link":"grid/event/header-dblclick-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-header-dblclick-event"},{"title":"单元格点击事件","content":"<p>在 <code>grid</code> 标签上配置 <code>cell-click</code> 可以监听到单元格的点击事件</p>\n","link":"grid/event/cell-click-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-cell-click-event"},{"title":"单元格双击事件","content":"<p>在 <code>grid</code> 标签上配置 <code>cell-dblclick</code> 可以监听到单元格的双击事件</p>\n","link":"grid/event/cell-dblclick-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-cell-dblclick-event"},{"title":"鼠标进入单元格事件","content":"<p>在 <code>grid</code> 标签上配置 <code>cell-dblclick</code> 可以监听到单元格的双击事件</p>\n","link":"grid/event/cell-mouseenter-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-cell-mouseenter-event"},{"title":"鼠标离开单元格事件","content":"<p>在 <code>grid</code> 标签上配置 <code>cell-mouseleave</code> 可以监听到鼠标离开单元格事件</p>\n","link":"grid/event/cell-mouseleave-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-cell-mouseleave-event"},{"title":"事件","content":"<p>在 <code>grid</code> 标签上配置 <code>scroll</code> 事件，可以监听表格的滚动</p>\n","link":"grid/event/grid-scroll-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-grid-scroll-event"},{"title":"事件对象","content":"<p>表格属性 <code>envents</code> 设置表格的事件对象。\n</p>\n","link":"grid/event/grid-events","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-grid-events"},{"title":"行选中事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>highlightCurrentRow</code> 有效，当手动选中行时触发的事件</p>\n","link":"grid/event/current-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-current-change-event"},{"title":"单元格被激活编辑时会触发该事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>edit-actived</code> 有效，单元格被激活编辑时触发的事件</p>\n","link":"grid/event/edit-actived-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-edit-actived-event"},{"title":"单元格编辑完成触发该事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>edit-closed</code> 有效，单元格编辑完成触发该事件</p>\n","link":"grid/event/edit-closed-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-edit-closed-event"},{"title":"两个表格数据相互关联","content":"详细用法参考如下示例","link":"grid/event/table-data-association","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-table-data-association"},{"title":"当单元格激活时如果是禁用状态时会触发该事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>edit-disabled-event</code> 有效，同时需要在 <code>edit-config</code> 配置中的 <code>activeMethod</code> 方法控制单元格是否可以编辑（返回 <code>true</code> 可以编辑，反之亦然）。</p>\n","link":"grid/event/edit-disabled-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-edit-disabled-event"},{"title":"右键点击表尾单元格事件","content":"<p>在 <code>grid</code> 标签上配置 <code>footer-cell-context-menu</code> 右键点击表尾单元格事件,配置 <code>footer-cell-click</code> 可以触发点击表尾单元格事件。</p>\n","link":"grid/event/footer-cell-context-menu-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-footer-cell-context-menu-event"},{"title":"右键点击表头事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>header-cell-context-menu</code> 可以监听右键点击表头事件</p>\n","link":"grid/event/header-cell-context-menu-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-header-cell-context-menu-event"},{"title":"分页发生改变事件","content":"<p>只对 在 <code>grid</code> 标签上配置 <code>page-change</code> 可以监听分页发生改变事件</p>\n","link":"grid/event/page-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-page-change-event"},{"title":"分页发生改变前的事件","content":"<p>通过在 <code>grid</code> 标签上配置 <code>is-before-page-change</code> 选择是否打开页面改变时的前置处理特性。在值为 <code>true</code> 时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的 <code>callback</code> 或者 <code>rollback</code> 使之生效或者失效；通过事件 <code>before-page-change</code> 在进行翻页操作或者改变页大小操作时触发，然后控制是否跳转分页。</p>\n","link":"grid/event/page-before-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-page-before-change-event"},{"title":"勾选行事件","content":"<p>在 <code>grid</code> 标签上配置 <code>radio-change</code> 可以监听勾选行事件\n只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件</p>\n","link":"grid/event/radio-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-radio-change-event"},{"title":"列宽改变事件","content":"<p>在 <code>grid</code> 标签上配置 <code>resizable-change</code> 可以监听列宽改变事件</p>\n","link":"grid/event/resizable-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-resizable-change-event"},{"title":"手动勾选全选时触发的事件","content":"<p>在 <code>grid</code> 标签上配置 <code>select-all</code> 有效\n只对 type=selection 有效，当手动勾选全选时触发的事件</p>\n","link":"grid/event/select-all-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-select-all-event"},{"title":"勾选行事件","content":"<p>在 <code>grid</code> 标签上配置 <code>select-change</code> 可以监听到勾选行事件\n只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件</p>\n","link":"grid/event/select-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-select-change-event"},{"title":"行展开收起事件","content":"<p>在 <code>grid</code> 标签上配置 <code>toggle-expand-change</code> 可以监听到行展开收起事件</p>\n","link":"grid/event/toggle-expand-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-toggle-expand-change-event"},{"title":"树节点展开收起事件","content":"<p>在 <code>grid</code> 标签上配置 <code>toggle-tree-change</code> 可以监听树节点展开收起事件</p>\n","link":"grid/event/toggle-tree-change-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-toggle-tree-change-event"},{"title":"工具栏点击事件","content":"<p>在 <code>grid</code> 标签上配置 <code>resizable-change</code> 可以监听工具栏点击事件</p>\n","link":"grid/event/toolbar-button-click-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-toolbar-button-click-event"},{"title":"校验不通过事件","content":"<p>在 <code>grid</code> 标签上配置 <code>valid-error</code> 监听校验不通过事件</p>\n","link":"grid/event/valid-error-event","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"event-valid-error-event"},{"title":"获取表格行方法","content":"<div class=\"tip custom-block\"><p class=\"custom-block-title\">获取行的方法</p>\n<p><code>getCurrentRow</code> 获取当前行\n<code>getRowIndex</code> 获取当前行号\n<code>getRadioRow</code> Radio 单选选中行\n<code>getRowById</code> 通过 rowId 获取当前行\n<code>getRowNode</code> 通过 tr 元素获取行信息</p>\n</div>\n","link":"grid/tiny-first-menu/get-row-method","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-get-row-method"}]
+[
+  {
+    "title": "表头点击事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>header-cell-click</code> 可以监听到表头的点击事件</p>\n",
+    "link": "grid/event/header-click-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-header-click-event"
+  },
+  {
+    "title": "表头双击事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>header-cell-dblclick</code> 可以监听到表头的双击事件</p>\n",
+    "link": "grid/event/header-dblclick-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-header-dblclick-event"
+  },
+  {
+    "title": "单元格点击事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>cell-click</code> 可以监听到单元格的点击事件</p>\n",
+    "link": "grid/event/cell-click-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-cell-click-event"
+  },
+  {
+    "title": "单元格双击事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>cell-dblclick</code> 可以监听到单元格的双击事件</p>\n",
+    "link": "grid/event/cell-dblclick-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-cell-dblclick-event"
+  },
+  {
+    "title": "鼠标进入单元格事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>cell-dblclick</code> 可以监听到单元格的双击事件</p>\n",
+    "link": "grid/event/cell-mouseenter-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-cell-mouseenter-event"
+  },
+  {
+    "title": "鼠标离开单元格事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>cell-mouseleave</code> 可以监听到鼠标离开单元格事件</p>\n",
+    "link": "grid/event/cell-mouseleave-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-cell-mouseleave-event"
+  },
+  {
+    "title": "表格滚动事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>scroll</code> 事件，可以监听表格的滚动</p>\n",
+    "link": "grid/event/grid-scroll-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-grid-scroll-event"
+  },
+  {
+    "title": "事件对象",
+    "content": "<p>表格属性 <code>envents</code> 设置表格的事件对象。\n</p>\n",
+    "link": "grid/event/grid-events",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-grid-events"
+  },
+  {
+    "title": "行选中事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>highlightCurrentRow</code> 有效，当手动选中行时触发的事件</p>\n",
+    "link": "grid/event/current-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-current-change-event"
+  },
+  {
+    "title": "单元格被激活编辑时会触发该事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>edit-actived</code> 有效，单元格被激活编辑时触发的事件</p>\n",
+    "link": "grid/event/edit-actived-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-edit-actived-event"
+  },
+  {
+    "title": "单元格编辑完成触发该事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>edit-closed</code> 有效，单元格编辑完成触发该事件</p>\n",
+    "link": "grid/event/edit-closed-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-edit-closed-event"
+  },
+  {
+    "title": "两个表格数据相互关联",
+    "content": "详细用法参考如下示例",
+    "link": "grid/event/table-data-association",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-table-data-association"
+  },
+  {
+    "title": "当单元格激活时如果是禁用状态时会触发该事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>edit-disabled-event</code> 有效，同时需要在 <code>edit-config</code> 配置中的 <code>activeMethod</code> 方法控制单元格是否可以编辑（返回 <code>true</code> 可以编辑，反之亦然）。</p>\n",
+    "link": "grid/event/edit-disabled-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-edit-disabled-event"
+  },
+  {
+    "title": "右键点击表尾单元格事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>footer-cell-context-menu</code> 右键点击表尾单元格事件,配置 <code>footer-cell-click</code> 可以触发点击表尾单元格事件。</p>\n",
+    "link": "grid/event/footer-cell-context-menu-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-footer-cell-context-menu-event"
+  },
+  {
+    "title": "右键点击表头事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>header-cell-context-menu</code> 可以监听右键点击表头事件</p>\n",
+    "link": "grid/event/header-cell-context-menu-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-header-cell-context-menu-event"
+  },
+  {
+    "title": "分页发生改变事件",
+    "content": "<p>只对 在 <code>grid</code> 标签上配置 <code>page-change</code> 可以监听分页发生改变事件</p>\n",
+    "link": "grid/event/page-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-page-change-event"
+  },
+  {
+    "title": "分页发生改变前的事件",
+    "content": "<p>通过在 <code>grid</code> 标签上配置 <code>is-before-page-change</code> 选择是否打开页面改变时的前置处理特性。在值为 <code>true</code> 时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的 <code>callback</code> 或者 <code>rollback</code> 使之生效或者失效；通过事件 <code>before-page-change</code> 在进行翻页操作或者改变页大小操作时触发，然后控制是否跳转分页。</p>\n",
+    "link": "grid/event/page-before-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-page-before-change-event"
+  },
+  {
+    "title": "勾选行事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>radio-change</code> 可以监听勾选行事件\n只对 type=radio 有效，当手动勾选并且值发生改变时触发的事件</p>\n",
+    "link": "grid/event/radio-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-radio-change-event"
+  },
+  {
+    "title": "列宽改变事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>resizable-change</code> 可以监听列宽改变事件</p>\n",
+    "link": "grid/event/resizable-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-resizable-change-event"
+  },
+  {
+    "title": "手动勾选全选时触发的事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>select-all</code> 有效\n只对 type=selection 有效，当手动勾选全选时触发的事件</p>\n",
+    "link": "grid/event/select-all-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-select-all-event"
+  },
+  {
+    "title": "勾选行事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>select-change</code> 可以监听到勾选行事件\n只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件</p>\n",
+    "link": "grid/event/select-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-select-change-event"
+  },
+  {
+    "title": "行展开收起事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>toggle-expand-change</code> 可以监听到行展开收起事件</p>\n",
+    "link": "grid/event/toggle-expand-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-toggle-expand-change-event"
+  },
+  {
+    "title": "树节点展开收起事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>toggle-tree-change</code> 可以监听树节点展开收起事件</p>\n",
+    "link": "grid/event/toggle-tree-change-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-toggle-tree-change-event"
+  },
+  {
+    "title": "工具栏点击事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>resizable-change</code> 可以监听工具栏点击事件</p>\n",
+    "link": "grid/event/toolbar-button-click-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-toolbar-button-click-event"
+  },
+  {
+    "title": "校验不通过事件",
+    "content": "<p>在 <code>grid</code> 标签上配置 <code>valid-error</code> 监听校验不通过事件</p>\n",
+    "link": "grid/event/valid-error-event",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "event-valid-error-event"
+  },
+  {
+    "title": "获取表格行方法",
+    "content": "<div class=\"tip custom-block\"><p class=\"custom-block-title\">获取行的方法</p>\n<p><code>getCurrentRow</code> 获取当前行\n<code>getRowIndex</code> 获取当前行号\n<code>getRadioRow</code> Radio 单选选中行\n<code>getRowById</code> 通过 rowId 获取当前行\n<code>getRowNode</code> 通过 tr 元素获取行信息</p>\n</div>\n",
+    "link": "grid/tiny-first-menu/get-row-method",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-get-row-method"
+  }
+]