# 渲染插件

Sula 内部的组件和模板，都将@sula/plugin-render 作为内置能力，这意味着使用者可以直接在组件及模板中基于 render 属性进行配置使用

# 插件使用

import RenderPlugin from "@sula/plugin-render";

const instance = new Sula();
instance.registerType('render', 3);
instance.registerPlugin(new RenderPlugin());
instance.render('card', /* ctx */{}, {props: { title: '卡片' }})

# 组件使用

import { Card, ...} from "@sula/plugin-render";

<Card
  type="inner"
  bordered
  title={<span>Payment</span>}
  subTitle="Sub Title"
  extra={<Input />}
>
  Account_AP
</Card>

# API

渲染插件 render 配置对应的类型：renderType，支持配置属性如下：

# type

类型：string | (ctx, config) => ReactElement
默认值: -

表单项类型，可配置类型见下方插件介绍，支持配置成方法，直接渲染方法返回的组件

# props?

类型：object
默认值: -

应用于组件上的属性设置。render 类型对应的配置，props 字段中方法默认不会转换，直接透传给基础渲染组件，若想在提前转化，需要在对应字段前加上@，示例：

{
  props: {
   '@showSearch': (ctx) => ctx.data.isFinish,
   filterOption: (filterValue) => true,
  }
}
//转换后
{
  props: {
   showSearch: false,
   filterOption: (filterValue) => true,
  }
}

tips

Sula 内无论是基础组件还是上层模板，关于 render 展现类的配置方式都是遵循同样的原则
配置参数均支持字符串、模板字符串、方法
props 内部方法直接透传给组件，不会预先执行解析
除上述参数外，也可进行在同级进行一些额外的配置，支持模板字符串和方法，并会解析后，在 type 接收方法时第二个参数 config 中体现

# confirm

类型：string
默认值: -

点击元素，弹出气泡式的确认框

类型：string
默认值: -

简单的文字提示气泡框

# 表单插件

# input

对应表单控件的单行文本输入框

示例：

render: {
  type: 'input',
  props: {
    placeholder: 'please input',
  }
}

输入框 Input 对应 props 内，更多配置参考antd Input

# inputnumber

对应表单控件的数字输入框

示例：

render: {
  type: 'inputnumber',
  props: {
    placeholder: 'please inputnumber',
  }
}

输入框 InputNumber 对应 props 内，更多配置参考antd InputNumber

# autocomplete

对应表单控件的输入框自动完成功能

示例：

{
  type: 'autocomplete',
  props: {
    placeholder: 'please autocomplete',
  }
}

输入框 Autocomplete 对应 props 内，更多配置参考antd Autocomplete

# textarea

对应表单控件的多行文本输入框

示例：

{
  type: 'textarea',
  props: {
    placeholder: 'please textarea',
  }
}

输入框 Textarea 对应 props 内，更多配置参考antd Textarea

# search

对应表单控件的文本搜索框

示例：

{
  type: 'search',
  props: {
    placeholder: 'please search',
  }
}

输入框 Search 对应 props 内，更多配置参考antd Search

# mentions

对应表单控件的提及框

示例：

{
  type: 'mentions',
  props: {
    placeholder: 'please mentions',
  }
}

输入框 Mentions 对应 props 内，更多配置参考antd Mentions

# select

对应表单控件的选择框

示例：

{
  render: 'select',
  initialSource: [
    {
      text: '苹果',
      value: 'apple',
    },
    {
      text: '梨',
      value: 'pee',
    }
  ],
  remoteSource: {
    url: "/ptp/loadtest/list.json",
    method: "post",
  },
  props: {
    placeholder: 'please select',
  }
}

tips

单选模式设置showSearch，或mode为multiple/tags时，搜索将以文本搜索，如果文本为非string类型，则将使用key进行过滤

配置参数：

参数	说明	类型	默认值
initialSource	选择框初始选项	`Array`	`-`
remoteSource	选择框远程获取初始选项, 详情请见remoteSource	`object`	`-`

输入框 Select 对应 props 内，更多配置参考antd Select

# checkbox

对应表单控件的复选框

示例：

{
  render: {
    type: 'checkbox',
  },
  source: [],
  value: true,
  valuePropName: 'checked',
  props: { children: 'checkbox' },
}

输入框 Checkbox 对应 props 内，更多配置参考antd Checkbox

# checkboxgroup

对应表单控件的复选框组

示例：

{
  type: 'checkboxgroup',
  initialSource: [{
    text: '苹果',
    value: 'apple',
  }, {
    text: '桃子',
    value: 'peach'
  }]
  props: {}
}

输入框 Checkbox Group 对应 props 内，更多配置参考antd Checkbox Group

# radio

对应表单控件的单选框

示例：

{
  render: {
    type: 'radio',
  }
  value: false,
  valuePropName: 'checked',
  props: { children: 'radio' },
}

输入框 Radio 对应 props 内，更多配置参考antd Radio

# radiogroup

对应表单控件的单选框组

示例：

{
  type: 'radiogroup',
  initialSource: [{
    text: '苹果',
    value: 'apple',
  }, {
    text: '桃子',
    value: 'peach'
  }]
  props: {}
}

输入框 Radio Group 对应 props 内，更多配置参考antd Radio Group

# datepicker

对应表单控件的日期选择框

示例：

{
  type: 'datepicker',
  props: {
    valueFormat: 'utc', // 毫秒时间戳，如果设置为true则和format保持一致
    placeholder: 'please datepicker',
  }
}

tips

valueFormat将value的moment类型转换为字符串，同时我们扩展了两种format，utc和unix，分别代表了毫秒时间戳和秒时间戳

输入框 Datepicker 对应 props 内，更多配置参考antd Datepicker

# rangepicker

对应表单控件的日期范围选择框

示例：

{
  type: 'rangepicker',
  props: {
    valueFormat: 'utc', // 毫秒时间戳，如果设置为true则和format保持一致
    placeholder: ['start time', 'end time'],
  }
}

输入框 Rangepicker 对应 props 内，更多配置参考antd Rangepicker

# timepicker

对应表单控件的当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择

示例：

{
  type: 'timepicker',
  props: {
    valueFormat: 'utc', // 毫秒时间戳，如果设置为true则和format保持一致
    placeholder: 'please timepicker',
  }
}

输入框 Timepicker 对应 props 内，更多配置参考antd Timepicker

# treeselect

对应表单控件的类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等

示例：

{
  render: {
    type: 'treeselect',
    props: {
      placeholder: 'please treeselect',
    }
  },
  initialSource: [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
      value: 'hangzhou',
      label: 'Hangzhou',
      children: [{
        value: 'xihu',
        label: 'West Lake',
      }],
    }],
  }],
}

输入框 Treeselect 对应 props 内，更多配置参考antd Treeselect

# rate

对应表单控件的评分功能

示例：

{
  type: 'rate',
  props: {}
}

评分组件 Rate 对应 props 内，更多配置参考antd Rate

# slider

对应表单控件的滑动型输入器，展示当前值和可选范围功能

示例：

{
  type: 'slider',
  props: {}
}

滑动型输入器 Slider 对应 props 内，更多配置参考antd Slider

# switch

对应表单控件的开关选择器功能

示例：

{
  render:
  {
    type: 'switch',
    props: {}
  }
  valuePropName: 'checked'
}

开关选择器 Switch 对应 props 内，更多配置参考antd Switch

tips

valuePropName 是子节点的值的属性，如 Switch 的是 'checked'

# cascader

对应表单控件的级联选择框功能

示例：

{
  render: {
    type: 'cascader',
    props: {
      placeholder: 'please cascader',
    }
  },
  initialSource: [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  }]
}

开关选择器 Cascader 对应 props 内，更多配置参考antd Cascader

# transfer

对应表单控件的双栏穿梭选择框功能

示例：

{
  render: {
    type: 'transfer',
    props: {}
  }
  valuePropName: 'targetKeys',
  initialSource: [
  {
    key: '0',
    title: 'zhejiang',
    description: 'Zhejiang',
  },
  {
    key: '1',
    title: 'jiangsu',
    description: 'Jiangsu',
  }]
}

开关选择器 Transfer 对应 props 内，更多配置参考antd Transfer

tips

valuePropName 是子节点的值的属性，如 Transfer 的是 'targetKeys'

# upload

对应表单控件的文件选择上传和拖拽上传控件功能

示例：

{
  type: 'upload',
  props: {
    placeholder: 'please upload',
  }
}

开关选择器 Upload 对应 props 内，更多配置参考antd Upload

# remotesearchselect

远程搜索下拉框功能

示例：

{
  type: 'remotesearchselect',
  remoteSource: {
    init: false,
    url: 'https://jsonplaceholder.typicode.com/users',
    method: 'GET',
    converter({ data }) {
      return data.map(item => {
        return {
          text: item.name,
          value: item.name + '_' + item.id,
        }
      })
    },
  },
}

# submit

提交表单功能

示例：

{
  type: 'submit',
  confirm: 'Are you sure to submit',
  tooltip: 'submit the form',
  url: 'https://randomuser.me/api',
  method: 'get',
  text: 'submit',
  props: {},
  action: ctx => {
    console.log('submit finish, result:', ctx.result)
  },
},

# reset

重置表单功能

示例：

{
  type: 'reset',
  props: {
    type: 'primary',
    children: 'reset',
  },
},

# 表格插件

# divider

类型：boolean
默认值: -

分割符

tips

如果元素处于第一个位置，则不显示分割线

# columnmerge

表格列合并插件

示例：

{
  render:
  {
    type: 'columnmerge',
    render: [{
      type: "textLink",
      columnKey: "name",
      path: '/gallery',
      query: {name: 'sula'},
      text: 'to gallery',
    },
    {
      type: "text",
      columnKey: "phone",
      props: {
        type:'secondary',
        ellipsis: true,
      }
    }]
  }
}

配置参数：

参数	说明	类型	默认值
render	需要合并的列的数组每一项对应一项表格列的配置配置方式同RenderType	`Array<`RenderType`>`	`-`

# operationgroup

表格操作组插件

示例：

{
  render:
  {
    type: 'operationgroup',
    max: 3,
    render: [
      {
        type: 'icon',
        text: 'edit',
        tooltip: 'edit',
        props: {
          type: 's-edit',
        },
        action: () => {
          alert('click view 1')
        }
      },
      {
        type: 'iconLink',
        text: 'view',
        tooltip: 'view',
        path: `/view/\${data.id}`,
        props: {
          type: 'eye',
        },
      },
      {
        type: 'icon',
        text: 'copy',
        tooltip: 'copy',
        confirm: 'Are you sure to copy',
        action: {
          url: `task/copy.json`,
          type: 'fetch',
          method: 'get',
          params: {
            id: '${data.id}',
          },
        },
        props: {
          type: 's-copy',
        },
      },
    ],
    dropDownProps: {
      style: {
        marginRight: '8px',
      }
    }
  }
}

配置参数：

参数	说明	类型	默认值
render	操作按钮数组每一项对应一项表格列的配置配置方式同RenderType	`Array<`RenderType`>`	`-`
dropDownProps	下拉菜单的属性设置，详情请见Dropdown。注：菜单弹出位置始终为右下方向，设置placement无效。	`object`	`-`
max	展示个数，超过展示个数时会显示为下拉菜单	`number`	`3`

# rowSelection

表格选中行插件

示例：

titleRender: [
  {
    type: "rowSelection",
    props: {
      style: { marginRight: 8 }
    }
  }
];

# batchButton

表格批量操作按钮插件

示例：

titleRender: {
  right: [{
    type: "batchButton",
    text: "Delete",
    props: {
      type: "danger",
      icon: "minus",
      shape: "round",
      style: {
        marginRight: 8
      }
    }
  },{
    type: 'batchButton',
    text: 'Create',
    all: true,
    props: {
        type: 'success',
        icon: 'plus',
        shape: 'round',
    }, 
  }]
}

配置参数：

参数	说明	类型	默认值
all	all为true表示如果表格中一行数据都没有选中，按钮还是可用	`boolean`	`false`
text	按钮文本	`string`	`-`

# tabletitle

表格标题插件

示例：

titleRender: {
  left: {
    type: 'tabletitle',
    title: 'Baisc title', // 优先生效
    props: {
      title: 'Title',
    },
  },
}

配置参数：

参数	说明	类型	默认值
title	标题文本，也可以写在props属性中	`string`	`-`

# loadingbutton

表格载入状态按钮

示例：

{
  render:
  {
    type: 'loadingbutton',
    text: 'loading button',
    props: {
      type: 'primary',
    },
    action: {
      type: 'fetch',
      url: 'https://jsonplaceholder.typicode.com/posts',
      method: 'post',
      final: () => {
        console.log('finally');
      }
    }
  }
}

配置参数：

参数	说明	类型	默认值
defaultLoading	是否自动出现loading，目前只有配合`upload`插件才需要设置为false	`boolean`	`true`
其他参考button	`-`	`-`	`-`

# refresh

表格刷新插件

示例：

{
  type: 'icon',
  props: {
    type: 'redo',
  },
  action: 'refresh',
}

# reset

表格重置插件

示例：

{
  type: 'icon',
  props: {
    type: 'redo',
  },
  action: 'reset',
}

# modalform

弹框表单插件

示例：

action: {
  type: 'modalform',
  form: {
    fields: [
      {
        name: 'input',
        label: 'input',
        render: 'input',
      }
    ]
  },
  props: {},
  submit: {
    url: '/api/info.json',
  }
}

配置参数：

参数	说明	类型	默认值
form	form的配置信息	FormProps	`-`
formProps	form的配置信息	FormProps	`-`
submit	提交modalForm表单	FetchType	`-`

# 公共插件

# text

文本类型组件，可单独作为组件使用

配置使用示例：

render: {
  type: 'text',
  text: '苹果',
  props: {
    type: 'danger',
  }
}

直接使用示例：

import { Text } from "@sula/plugin-render";

<Text type="danger">Account_AP</Text>;

配置参数：

参数	说明	类型	默认值
type	文本类型	`'secondary' \| 'warning' \| 'danger'`	`-`
delete	删除线样式	`boolean`	`-`
ellipsis	超出宽度省略号显示，需配合 style.width 使用，如果出现水平对齐问题，可以通过添加vertical-align: bottom，或者父节点添加display: flex 解决	`boolean`	`-`

更多配置参考antd Typography.Text

# tag

用于标记事物的属性和维度，进行分类，可单独作为组件使用

配置使用示例：

{
  type: 'tag',
  props: {
    type: 'danger',
  }
}

直接使用示例：

import { Tag } from "@sula/plugin-render";

<Tag type="danger">Account_AP</Tag>;

配置参数：

参数	说明	类型	默认值
type	类型	`'primary' \| 'success' \| 'danger' \| 'warning'`	`-`
color	颜色	`string`	`-`
size	大小	`'default' \| 'large'`	`-`

更多配置参考antd Tag

# tags

用于标记事物的属性和维度，进行分类，可单独作为组件使用(多选)

直接使用示例：

import { Tags } from "@sula/plugin-render";

<Tags texts={["Account_AP", "Payment_method"]} />;

配置参数：

参数	说明	类型	默认值
texts	文案	`Array`	`-`

# badge

import { Badge } from "@sula/plugin-render";

<Badge type="danger" />;

配置参数：

参数	说明	类型	默认值
shape	形状	`'up' \| 'caret-down'`	`'up'`
status	状态	`boolean`	`false`
text	文案	`string`	`-`

更多配置参考antd Badge

# icon

进行标记和分类的小标签组件，可单独作为组件使用

配置使用示例：

{
  type: 'icon',
  props: {
    type: 'link',
  }
}

直接使用示例：

import { Icon } from "@sula/plugin-render";

<Icon type="danger" />;

配置参数：

参数	说明	类型	默认值
type	类型	`string`	`-`
bgHoverable	是否有包裹层	`string`	`-`
simple	类型	`string`	`-`
size	大小	`string`	`-`

Icon 对应 props 更多配置参考antd Icon

# button

按钮，可单独作为组件使用

配置使用示例：

{
  type: 'button',
  text: '确定',
  props: {
    type: 'danger',
  }
}

直接使用示例：

import { Button } from "@sula/plugin-render";

<Button type="danger">确定</Button>;

配置参数：

参数	说明	类型	默认值
type	类型	`string`	`-`
shape	形状	`'circle'\|'round'`	`-`
icon	图标	`string`	`-`
rightIcon	右侧图标	`'small'\|'large'`	`-`
disabled	是否禁用	`boolean`	`-`
ghost	幽灵属性，使按钮背景透明	`boolean`	`-`
text	文案	`string`	`-`
size	大小	`'small'\|'large'`	`-`

Button 对应 props 更多配置参考antd Button

# buttonGroup

按钮组，可单独作为组件使用

配置使用示例：

{
  type: 'buttongroup',
  props: {
    style: { marginLeft: 8 },
  },
  buttons: [
    {
      text: 'left',
      action: () => {
        console.log('left')
      },
    },
    {
      text: 'middle',
    },
    {
      text: 'right',
    }
  ]
}

直接使用示例：

import { ButtonGroup } from "@sula/plugin-render";

<ButtonGroup shape="round" ghost type="primary">
  <Button>Left</Button>
  <Button>Right</Button>
</ButtonGroup>;

配置参数：

参数	说明	类型	默认值
size	大小	`string`	`-`
shape	形状	`string`	`-`
type	类型	`string`	`-`
ghost	幽灵属性，使按钮背景透明	`boolean`	`-`

ButtonGroup 对应 props 更多配置参考antd Button

向下弹出的列表，可单独作为组件使用

配置使用示例：

{
  type: 'dropdown',
  props: {
    style: { marginLeft: 8 },
  },
  overlay: [{
    type: 'icon',
    props: {
      type: 'link',
    },
    action: () => {
     console.log('left')
    }
  },
  {
    type: <span><Icon type="windows"/> 1st element</span>,
  }]
  }
}

直接使用示例：

import { Dropdown } from "@sula/plugin-render";

<Dropdown overlay={menu}>
  <Button>bottomLeft</Button>
</Dropdown>;

配置参数：

参数	说明	类型	默认值
overlay	菜单	`React.ReactElement[]`	`-`

Dropdown 对应 props 更多配置参考antd Dropdown

# dropdownbuttongroup

按钮向下弹出的列表

配置使用示例：

{
  type: 'dropdownbuttongroup',
  props: {
    style: { marginLeft: 8 },
  },
  buttons: [{ 
    overlay: [{
      type: 'icon',
      props: {
        type: 'link',
      },
      action: () => {
      console.log('left')
      }
    }]
  }]
}

# tree

对应表单控件的树形控件

示例：

import React from 'react'
import { Tree } from '@sula/plugin-render';

export default () => <Tree  treeData={[
    {
      title: 'Account_AP',
    },
    {
      title: 'Payment_method',
    },
    {
      title: 'Account_AP',
      children: [{ title: 'Account_AP' }, { title: 'Payment_method' }],
    },
  ]} />

树组件 Tree 对应 props 内，更多配置参考antd Tree

# edittable

可编辑表格插件

具体例子和配置参考edittable

# tagfilter

标签过滤插件

具体例子和配置参考tagfilter

# 容器插件

# div

空标签，可单独作为组件使用

配置使用示例：

{
  container:{
    type: 'div',
    props: {}
  }
}

直接使用示例：

import { Div } from "@sula/plugin-render";

<Div>内容</Div>;

# card

向下弹出的列表，可单独作为组件使用

配置使用示例：

{
  container: {
    type: 'card',
    props: {
      title: "卡片标题"
    }
  }
}

直接使用示例：

import { Card } from "@sula/plugin-render";

<Card title="卡片标题">卡片内容</Card>;

配置参数：

参数	说明	类型	默认值
original	是否使用 antd 主题	`boolean`	`-`
className	类	`string`	`-`
subTitle	副标题	`string`	`-`
title	主标题	`string`	`-`

Card 对应 props，更多配置参考antd Card

# collapsablecard

可以折叠/展开的内容区域，可单独作为组件使用

配置使用示例：

{
  type: 'collapsablecard',
  props: {
    title: "Payment"
  }
}

直接使用示例：

import { CollapsableCard } from "@sula/plugin-render";

<CollapsableCard title="Payment">Account_AP</CollapsableCard>;

配置参数：

CollapsableCard 对应 props，更多配置参考antd Collapse

# steps

步骤条，可单独作为组件使用

配置使用示例，结合 form 使用：

import Form from '@sula/form';

<Form
  layout="vertical"
  container={{
    type: 'steps',
    props: {
      id: 'xxx',
    },
  }}
  fields={[
    {
      container: {
        type: 'step',
        props: {
          title: 'Header',
        },
      },
      fields: [
        {
          name: 'name',
          label: 'Name',
          render: 'input',
        },
      ],
    },
    {
      container: {
        type: 'step',
        props: {
          title: 'Header2',
        },
      },
      fields: [
        {
          name: 'address',
          label: 'Address',
          render: 'input',
        },
      ],
    },
  ]}
/>

直接使用示例：

import { Steps } from "@sula/plugin-render";

<Steps>
  <Steps.Step title="Header1" extra={<div>Extra</div>}>
    内容1
  </Steps.Step>
  <Steps.Step title="Header1" extra={<div>Extra</div>}>
    内容2
  </Steps.Step>
</Steps>;

配置参数：

Steps 对应 props，更多配置参考antd Steps

# tabs

通常在表单详情页使用

配置使用示例，结合 form 使用：

import Form from '@sula/form';

<Form
  layout="vertical"
  container={{
    type: 'tabs',
    props: {
      tabsType: 'card',
    },
  }}
  fields={[
    {
      container: {
        type: 'tabpane',
        props: {
          tab: 'tab-1',
        },
      },
      fields: [
        {
          name: 'name',
          label: 'Name',
          render: 'input',
        },
      ],
    },
    {
      container: {
        type: 'tabpane',
        props: {
          tab: 'tab-2',
        },
      },
      fields: [
        {
          name: 'address',
          label: 'Address',
          render: 'input',
        },
      ],
    },
  ]}
/>

tips

tabs作为插件使用做了简化和修改，

tabs只拥有defaultActiveIndex和tabsType属性
tabpan只拥有tab属性

直接使用示例：

import { Tabs } from "@sula/plugin-render";

<Tabs defaultActiveKey="1" tabsType="card">
  <Tabs.TabPane key="1" tab="tab1">
    <Card>内容1</Card>
  </Tabs.TabPane>
  <Tabs.TabPane key="2" tab="tab2">
    <Card>内容2</Card>
  </Tabs.TabPane>
</Tabs>

<Tabs defaultActiveKey="1" tabsType="split">
  <Tabs.TabPane key="1" tab="tab1">
    <Tabs defaultActiveKey="1" tabsType="card">
      <Tabs.TabPane key="1" tab="tab1">
        <Card>内容1</Card>
      </Tabs.TabPane>
      <Tabs.TabPane key="2" tab="tab2">
        <Card>内容2</Card>
      </Tabs.TabPane>
    </Tabs>
  </Tabs.TabPane>
  <Tabs.TabPane key="2" tab="tab2">
    <Tabs defaultActiveKey="1" tabsType="card">
      <Tabs.TabPane key="1" tab="tab1">
        <Card>内容1</Card>
      </Tabs.TabPane>
      <Tabs.TabPane key="2" tab="tab2">
        <Card>内容2</Card>
      </Tabs.TabPane>
    </Tabs>
  </Tabs.TabPane>
</Tabs>

配置参数：

参数	说明	类型	默认值
tabsType	页签样式	`'split'\|'card'`	`-`

Tabs 对应 props，更多配置参考antd Tabs

扩展的渲染插件 →

# 渲染插件

# 插件使用

# 组件使用

# API

# type

# props?

# confirm

# tooltip

# 表单插件

# input

# inputnumber

# autocomplete

# textarea

# search

# mentions

# select

# checkbox

# checkboxgroup

# radio

# radiogroup

# datepicker

# rangepicker

# timepicker

# treeselect

# rate

# slider

# switch

# cascader

# transfer

# upload

# remotesearchselect

# submit

# reset

# 表格插件

# divider

# columnmerge

# operationgroup

# rowSelection

# batchButton

# tabletitle

# loadingbutton

# refresh

# reset

# modalform

# 公共插件

# text

# tag

# tags

# badge

# icon

# button

# buttonGroup

# dropdown

# dropdownbuttongroup

# tree

# edittable

# tagfilter

# 容器插件

# div

# card

# collapsablecard

# steps

# tabs