gdweb v1.1.4-1

Gdweb

该项目用版本1.5.0的Angular CLI生成和打包.

Gdweb 介绍

该项目为基础组件实现项目，使用Angular5.0编写，用Angular/Cli 1.5.0生成和编译。该项目总共包含19个组件，分别为button、checkbox、collapse、content、datetime、dialog、form、input、item-select、loading、menu、numberInput、pagination、radio、select、tab、tags、tree、upload、table、textover

• 编辑器

  Visual Studio Code

• 实现语言

  TypeScript2.4.2 + Angular5.0

• 当前版本

  0.5.0

• 项目参与者

  yinzhong.yu
  zhihua.xiang
  zeyuan.liu

Gdweb 组件列表

• gd-button

  按钮组件 实现方式为指令

  button指令属性列表

  属性	说明	类型	默认值	实现版本
  gdType	按钮类型，分为默认(default)和图标按钮(icon)两种	string	default	0.2.0
  gdSize	按钮大小，分为默认(default)和图标按钮(large)两种	string	default	0.2.0
  gdIcon	图标按钮的图标名称或者路径，仅在gdType为icon时有效，提供ok,add,cancel,delete,edit,exit,home,print,refresh,reset,return,save,download,upload,search,setting,submit,zoomdown,zoomup这几种内置图标	string	-	0.2.0
  gdDisabled	是否禁用按钮	boolean	false	0.2.0

  button-group组件属性列表

  该组件作为button组件可选父级容器，提供给button组件一个横向排列的容器空间

  组件使用示例

  <button gd-button>这是普通按钮</button>
  <button gd-button [gdType]="'icon'" [gdIcon]="'ok'">这是图标按钮</button>
  <button gd-button [gdSize]="'large'">这是大号按钮</button>
  <button gd-button [gdDisabled]="true">这是禁用按钮</button>
  <gd-button-group>
    <button gd-button>按钮1</button>
    <button gd-button>按钮2</button>
    <button gd-button>按钮3</button>
  </gd-button-group>

• gd-checkbox

  复选框组件 实现方式为组件

  gd-checkbox组件属性列表

  属性	说明	类型	默认值	实现版本
  gdName	作为表单元素时的name属性	string	-	0.2.0
  gdSize	复选框的大小，分为'default'和'large'两种	string	default	0.5.0
  gdValue	复选框对应的值	string	-	0.2.0
  gdLabel	复选框显示的文本	string	-	0.2.0
  gdDisabled	是否禁用复选框	boolean	false	0.2.0
  gdIndeterminate	是否可以半选中	boolean	false	0.2.0
  ngModel	指定当前是否选中	boolean	false	0.2.0
  (ngModelChange)	选中状态变化时的回调	EventEmitter<boolean>	-	0.2.0

  gd-checkbox-group组件属性列表

  属性	说明	类型	默认值	实现版本
  gdName	作为表单元素时的name属性	string	-	0.2.0
  gdSize	复选框的大小，分为'default'和'large'两种	string	default	0.5.0
  gdCheckData	生成复选框组的数据	ICheckbox[]	-	0.5.0
  ngModel	默认选中的数据数组	Array<string>	-	0.5.0
  (ngModelChange)	复选框组下面的复选款选中状态发生变化时的回调	EventEmitter<Array<string>>	-	0.5.0

  ICheckbox接口数据结构

  属性	说明	类型	是否必须
  value	复选框对应的值	any	false
  label	复选框显示的文本	string	true
  disabled	是否禁用该复选框	boolean	false
  checked	该复选框是否选中	boolean	false

  组件使用示例

    list = [{value: 'aaa', label: 'aaa'}, {value: 'bbb', label: 'bbb'}, {value: 'ccc', value: 'ccc'}];
    listChecked = ['aaa'];
    value = false;
    change(val) {
      console.log('值发生了变化');
    }
  
    groupChange(ev) {
      console.log(ev);
    }

  <gd-checkbox [gdValue]="'val'" [gdLabel]="'普通复选框'"></gd-checkbox>
  <gd-checkbox [gdValue]="'val'" [gdLabel]="'大号复选框'" [gdBig]="true"></gd-checkbox>
  <gd-checkbox [gdValue]="'val'" [gdLabel]="'禁用复选框'" [gdDisabled]="true"></gd-checkbox>
  <gd-checkbox [gdValue]="'val'" [gdLabel]="'使用ngModel的复选框'" [ngModel]="value" (ngModelChange)="change($event)"></gd-checkbox>
  <gd-checkbox-group [ngModel]="listChecked" [gdCheckData]="list" (ngModelChange)="groupChange($event)"></gd-checkbox-group>

• gd-content

  布局组件 实现方式为指令 分为gd-col列指令和gd-row行指令两个

  组件属性列表
  gd-row

  属性	说明	类型	默认值	实现版本
  justify	布局下的水平排列方式，可选值有左对齐(start)、右对齐(end)、居中对齐(center)、每个项目两侧的间隔相等(around)、两端对齐，项目之间的间隔都相等(between)	string	start	0.2.0
  align	布局下的垂直排列方式，可选值有顶部对齐(start)、底部对齐(end)、居中对齐(center)、如果项目未设置高度或设为auto，将占满整个容器的高度(stretch)、项目的第一行文字的基线对齐(baseline)	string	start	0.2.0
  gutter	每个项目之间的间隔	number	0	0.2.0

  gd-col

  属性	说明	类型	默认值	实现版本
  span	该列所占比例，可选值为1-12，可不设置，用样式自己控制宽度	number	12	0.2.0
  order	该列所在的位置	number	1	0.2.0
  offset	该列偏移的位置，可选值为0-11	number	0	0.2.0

  组件使用示例

  <div gd-row [justify]="'center'">
    <div gd-col [span]="3"></div>
    <div gd-col [span]="3"></div>
  </div>

• gd-collapseset

  折叠面板控件 实现方式为组件

  gd-collapseset组件属性列表

  属性	说明	类型	默认值	实现版本
  gdAccordion	每次是否只展开一个折叠框	boolean	false	0.5.0

  gd-collapse组件属性列表 |属性|说明|类型|默认值|实现版本| |:---|:---|:---:|---:|:---:| |gdTitle|折叠面板显示的标题|string|-|0.5.0| |gdActive|是否展示该折叠面板|boolean|false|0.5.0| |gdDisabled|是否禁用该折叠面板|boolean|false|0.5.0|

  组件使用示例

    <gd-collapseset>
      <gd-collapse [gdTitle]="'aaa'" [gdActive]="true">
        <div>aaaaa</div>
      </gd-collapse>
      <gd-collapse [gdTitle]="'bbb'" [gdDisabled]="true" [gdActive]="false">
        <div>bbbbb</div>
      </gd-collapse>
      <gd-collapse [gdTitle]="'ccc'">
        <div>ccccc</div>
      </gd-collapse>
    </gd-collapseset>

• gd-datetime

  时间选择器控件 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdMaxTime	可以选择的最大时间	string	-	0.2.0
  gdMinTime	可以选择的最小时间	string	-	0.2.0
  gdFormat	输出的时间格式，具体参考flatpickr官网	string	Y-m-d	0.2.0
  gdMode	选择器控件的选择模式，可选值为只可选择年月日(year)、可选择年月日和时间(yeartime)、只可选择时间(time)	string	year	0.2.0
  gdName	作为表单元素时的name属性	string	-	0.2.0
  gdDisabled	是否禁用时间选择器	boolean	false	0.2.0
  gdSize	选择器的大小，可选值为默认(default)和大号(large)	string	default	0.2.0
  gdWidth	组件的宽度	number/string	-	0.2.0
  gdHeight	组件的高度	number/string	-	0.2.0
  ngModel	选择器的值	string	-	0.2.0
  (ngModelChange)	选择器的值更改后的回调	EventEmitter<string>	-	0.2.0

  组件使用示例

  <gd-datetime></gd-datetime>  <--普通的选择器-->

• gd-dialog

  弹窗控件 实现方式为组件和服务两种形式

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdTitle	弹窗的显示标题	string	'弹窗'	0.2.0
  gdVisible	弹窗是否显示	boolean	false	0.2.0
  gdShowFooter	是否显示底部操作区域	boolean	false	0.2.0
  gdOkText	底部操作区域确定按钮的显示文本	string	'确定'	0.2.0
  gdCancelText	底部操作区域取消按钮的显示文本	string	'取消'	0.2.0
  gdWidth	弹窗的宽度	number/string	-	0.2.0
  gdIsDrag	是否可以拖拽	boolean	false	0.2.0
  gdIsFullScreen	是否全屏显示	boolean	false	0.2.0
  gdIndex	弹窗的显示次序（默认在10000的基础上根据界面上的弹窗数量+10）	number	-	0.2.0
  gdType	弹窗的类型，分为default、ok、question、warning、info、error	string	'default'	0.2.0
  gdAppendDOM	弹窗依附的节点DOM数据	HTMLElement	body	0.2.0
  gdCanClose	是否显示关闭按钮	boolean	true	0.2.0
  gdOnOk	底部操作区域确定按钮的点击回调	Function	-	0.2.0
  gdOnCancel	底部操作区域取消按钮的点击回调	Function	-	0.2.0
  (gdOnClose)	弹窗关闭时的回调	EventEmitter<void>	-	0.2.0

  组件服务方法列表

  alertService 为GDAlertService服务的实例对象，一般通过依赖注入的方式实例化

  方法定义	参数列表	调用方式
  open(opts: GdAlertOption)	opts，GdAlertOption类型的参数	alertService.open(opts)
  info(content: string, index?: number, okCb?: Function)	content参数是弹窗显示的内容，index参数为弹窗显示的次序（可选），okCb参数为弹窗的确定按钮的点击回调（可选）	alertService.info('这是信息弹窗', 100010, () => {alert(你点了确定按钮)})
  success(content: string, index?: number, okCb?: Function)	content参数是弹窗显示的内容，index参数为弹窗显示的次序（可选），okCb参数为弹窗的确定按钮的点击回调（可选）	alertService.success('这是成功信息弹窗', 100010, () => {alert(你点了确定按钮)})
  error(content: string, index?: number, okCb?: Function)	content参数是弹窗显示的内容，index参数为弹窗显示的次序（可选），okCb参数为弹窗的确定按钮的点击回调（可选）	alertService.error('这是错误信息弹窗', 100010, () => {alert(你点了确定按钮)})
  warning(content: string, index?: number, okCb?: Function)	content参数是弹窗显示的内容，index参数为弹窗显示的次序（可选），okCb参数为弹窗的确定按钮的点击回调（可选）	alertService.warning('这是警告信息弹窗', 100010, () => {alert(你点了确定按钮)})
  confirm(opts: GdAlertOption)	opts，GdAlertOption类型的参数	alertService.confirm(opts)

  GdAlertService 参数列表

  参数名	说明	类型	默认值	是否必填
  gdTitle	弹窗显示的标题	string	'弹窗'	false
  gdVisible	是否显示弹窗	boolean	-	false
  gdWidth	弹窗的宽度	number/string	-	false
  gdBody	弹窗显示的内容	string/TemplateRef<{}>	-	true
  gdOkText	弹窗底部操作区域确定按钮的文本	string	'确定'	false
  gdCancelText	弹窗底部操作区域取消按钮的文本	string	'取消'	false
  gdIndex	弹窗的显示次序（默认在10000的基础上根据界面上的弹窗数量+10）	number	-	false
  gdShowFooter	是否显示底部操作区域	boolean	false	false
  gdFooter	底部区域自定义内容	string/TemplateRef<{}>	-	false
  gdIsDrag	是否可以拖动	boolean	true	false
  gdIsFullScreen	是否全屏显示	Boolean	false	false
  gdCanClose	是否显示关闭按钮	Boolean	true	false
  gdType	弹窗的类型，分为default、ok、question、warning、info、error	string	'default'	false
  gdAppendDOM	弹窗依附的DOM元素	HTMLElement	-	false
  gdOnOk	底部操作区域确定按钮的点击回调	Function	-	false
  gdOnCancel	底部操作区域取消按钮的点击回调	Function	-	false
  gdOnClose	弹窗关闭的回调	EventEmitter<void>	-	false

• gd-form

  form表单组件，实现方式为指令，还包含了gd-form-control组件和gd-form-explain指令

  gd-form指令

  from表单指令，用来表示一个自定义的gdform表单

  属性	说明	类型	默认值	实现版本
  gdMode	form组件显示的模式，分为'vertical'和'horizontal'两种	'horizontal'	0.5.0

  gd-form-control组件

  表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等

  属性	说明	类型	默认值	实现版本
  gdIsRequired	是否为必填域	boolean	false	0.2.0
  gdValidStatus	表单域的校验状态	string/NgControl	-	0.2.0

  gd-form-explain组件

  用于显示提示信息

  gd-form-label组件

  用来显示文本类容

  组件使用示例

  <!--普通的form表单-->
  <form gd-form>
    <gd-form-control [gdIsRequired]="true">
      <label gd-form-label>用户名:<label>
      <div class="form-control-field">
        <gd-input formNameControl="username"></gd-input>
      </div>
    </gd-form-control>
  </form>
  <!--带有错误提示的form表单-->
  <form gd-form>
    <gd-form-control [gdIsRequired]="true">
      <label gd-form-label>用户名:<label>
      <div class="form-control-field">
        <gd-input formNameControl="username"></gd-input>
        <label gd-form-explain>请输入正确的用户名</label>
      </div>
    </gd-form-control>
  </form>

• gd-input

  输入框组件 实现方式为组件形式

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdPlaceholder	输入框的提示性文字	string	-	0.2.0
  gdName	input组件作为form表单域的时候的name属性	string	-	0.2.0
  gdType	输入框的类型，可选值为标准的HTML中input的类型属性值	string	'text'	0.2.0
  gdReadonly	输入框是否只读	boolean	false	0.2.0
  gdDisabled	是否禁用输入框	boolean	false	0.2.0
  gdSize	输入框的大小，分为default、large	string	'default'	0.2.0
  gdIsSearch	是否为搜索框	boolean	false	0.2.0
  gdPreIcon	输入框的后置图标	string/TemplateRef<void>	-	0.5.0
  gdPreIcon	输入框的前置图标	string/TemplateRef<void>	-	0.5.0
  gdSearchOnClick	搜索输入框按钮的点击回调	(val: string) => void	-	0.5.0
  ngModel	输入框的值	string	-	0.2.0
  (ngModelChang)	输入框的值改变的回调	EventEmitter<string>	-	0.2.0
  (gdEnter)	输入框响应回车键的回调	EventEmitter<string>	-	0.2.0
  (gdFocus)	输入框获取焦点的回调	EventEmitter<any>	-	0.2.0
  (gdBlur)	输入框失去焦点的回调	EventEmitter<any>	-	0.2.0

  组件使用示例

    <gd-input></gd-input> <!--普通的输入框-->
    <gd-input [gdPlaceholder]="'请输入正确的值'"></gd-input> <!--带提示文字的输入框-->
    <gd-input style="width: 200px;height: 50px;"></gd-input> <!--设定宽高度的输入框-->
    <gd-input [gdReadonly]="true"></gd-input> <!--只读输入框-->
    <gd-input [gdDisabled]="true"></gd-input> <!--禁用输入框-->
    <gd-input [gdSize]="'large'"></gd-input> <!--大号输入框-->
    <gd-input [gdIsSearch]="true"></gd-input> <!--搜索输入框-->
    <gd-input [gdAfterIcon]="afterIcon"> <!--带后置图标的输入框（前置图标实现方式类似）-->
      <ng-template #afterIcon>
        <i class="icon submit"></i>
      </ng-template>
    </gd-input>

• gd-item-select

  item-select项选择器，实现方式为组件

  gd-item-selector属性列表

  属性	说明	类型	默认值	实现版本
  gdCanSearch	是否显示搜索框	boolean	false	0.2.0
  gdItemData	生成选择框的数据列表	any[]	-	0.5.0
  gdHttpUrl	组件获取数据的链接	string	-	0.2.0
  gdDisplayField	数据中显示数据的字段名	string	'label'	0.2.0
  gdValueField	数据中值的字段名	string	'value'	0.2.0
  gdDataField	从链接中获得的数据中有用的数据的字段名	string	'data'	0.2.0
  gdHttpUrlParam	获取数据的接口参数	any	-	0.5.0
  gdDirectionField	数据中方向的字段名	string	'direction'	0.5.0
  gdDefaultDisabled	默认禁用的数据	any[]	-	0.5.0
  gdDefaultRightData	默认在右边的数据	any[]	-	0.5.0
  gdSearchPlaceholder	搜索框中显示的提示语	string	-	0.5.0
  (gdSelect)	数据转移后的回调	EventEmitter<IItemSelect[]>	-	0.5.0

  gd-item-selectorbox属性列表

  属性	说明	类型	默认值	实现版本
  gdCanSearch	是否显示搜索框	boolean	false	0.2.0
  gdItems	显示的数据	IItemSelect[]	-	0.5.0
  gdSearchPlaceholder	搜索框中显示的提示语	string	-	0.5.0
  (gdSelected)	项选中的回调	EventEmitter<IItemSelect[]>	-	0.5.0

  IItemSelect接口数据结构

  属性	说明	类型	是否必须
  direction	数据所在的方向，分为'left'和'right'两种，默认为'left'	string	false
  disabled	该选项是否禁用	boolean	false
  label	选项显示的文本	string	true
  value	选项对应的数据	any	false
  checked	该选项是否选中	boolean	false
  originalData	改选项对应的原始数据	any	false

  组件使用实例

    data: Array<any> = [];
    for (let i = 0; i < 10; i++) {
      this.data.push({
        label: `label${i}`,
        value: `label${i}`,
        direction: i % 4 === 0 ? 'right' : 'left'
      });
    }

    <gd-item-selector [gdItemData]="data"></gd-item-selector> <!--普通的选择器-->
    <gd-item-selector [gdItemData]="data" [gdCanSearch]="true"></gd-item-selector> <!--带搜索框的选择器-->

• gd-loading

  显示加载中的提示层 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdMsg	显示的提示信息	string	'加载中'	0.2.0
  gdIsShow	是否显示	boolean	false	0.2.0
  gdAppendDOM	加载器的依赖元素	HTMLElement	-	0.5.0

  组件使用实例

    <gd-loading [gdMsg]="'正在努力的加载中，请稍后……'" [gdIsShow]="true"></gd-loading> <!--显示出来的加载提示层-->

• gd-menu

  功能菜单 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdMode	菜单的展现方式，值分为纵向vertical、横向horizontal	string	'horizontal'	0.2.0
  gdMenuData	生成菜单的数据	Array	-	0.2.0
  gdHttpUrl	获取生成菜单数据的服务地址	string	-	0.2.0
  gdDisplayField	显示的字段名	string	'label'	0.2.0
  gdValueField	值的字段名	string	'value'	0.2.0
  gdChildField	子节点的字段名	string	'child'	0.2.0
  gdDataField	菜单列表字段的名称	string	'data'	0.2.0
  gdTheme	菜单的主题，分为亮色主题light和暗色主题dark两种	string	'light'	0.2.0
  (gdItemClick)	菜单的点击回调	EventEmitter<any>	-	0.2.0

  组件使用实例

    gdMenuData = [{
      label: '菜单1',
      value: 'menu1'
    }, {
      label: '菜单2',
      value: 'menu2',
      child: [{
        label: '子菜单1',
        value: 'submenu1'
      }, {
        label: '子菜单2',
        value: 'submenu2'
      }, {
        label: '子菜单2',
        value: 'submenu2'
      }]
    }, {
      label: '菜单3',
      value: 'menu3',
      child: [{
        label: '子菜单1',
        value: 'submenu1'
      }, {
        label: '子菜单2',
        value: 'submenu2'
      }, {
        label: '子菜单2',
        value: 'submenu2'
      }]
    }];
  
    itemClick(ev) {
      console.log(ev);
    }

    <gd-menu [gdMenuData]="gdMenuData"></gd-menu> <!--普通的菜单-->
    <gd-menu [gdMenuData]="gdMenuData" [gdMode]="'vertical'"></gd-menu> <!--纵向菜单-->
    <gd-menu [gdMenuData]="gdMenuData" (gdItemClick)="itemClick($event)"></gd-menu> <!--菜单的点击事件-->

• gd-numberInput

  数字输入框 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdMax	输入框能输入的最大值	number	-	0.2.0
  gdMin	输入框能输入的最小值	number	-	0.2.0
  gdStep	每次改变步数，可以为小数	number	1	0.2.0
  gdName	最为form表单域的时候的name属性	string	-	0.2.0
  gdSize	数字输入框的大小，分为'default'和'large'两种	string	'default'	0.5.0
  gdDisabled	是否禁用输入框	boolean	false	0.2.0
  ngModel	输入框的值	number	-	0.2.0
  (ngModelChange)	输入框的值发生改变的回调	EventEmitter<number>	-	0.2.0

  组件使用实例

    num = 10;
    numChange(ev) {
      console.log('数字变成了'+ev);
    }

    <gd-number-input></gd-number-input> <!--普通的数字输入框-->
    <gd-number-input [gdMax]="100" [gdMin]="0"></gd-number-input> <!--带最大最小值的数字输入框-->
    <gd-number-input [gdStep]="0.1"></gd-number-input> <!--设定了增减步数的数字输入框-->
    <gd-number-input [ngModel]="num" (ngModelChange)="numChange($event)"></gd-number-input> <!--使用ngModel的数字输入框-->

• gd-pagination

  分页组件 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdCurPage	当前页	number	1	0.2.0
  gdTotal	总数据量	number	-	0.2.0
  gdPageSize	每一页的数据量	number	-	0.2.0
  gdQuickJump	是否显示快速跳转输入框	boolean	false	0.2.0
  (gdJumpToPage)	跳转到某一页后的回调	EventEmitter<number>	-	0.2.0

  组件使用实例

    jumpToPage(ev) {
      console.log('当前页为：'+ev);
    }

    <gd-pagination [gdTotal]="100" [gdPageSize]="10" (gdJumpToPage)="jumpToPage($event)"></gd-pagination>

• gd-radio

  单选框实现 实现方式为组件

  radio组件属性列表

  属性	说明	类型	默认值	实现版本
  gdName	作为form表单域的时候的name属性	string	-	0.2.0
  gdDisabled	是否禁用单选框	boolean	false	0.2.0
  gdValue	对应的值	any	-	0.2.0
  gdLabel	显示的文本	string	-	0.2.0
  gdSize	单选框的大小,分为'default'和'large'两种	string	'default'	0.5.0
  ngModel	指定当前是否选中	boolean	false	0.2.0
  (ngModelChange)	选中状态变化后的回调	EventEmitter<boolean>	-	0.2.0

  radio-group组件属性列表

  属性	说明	类型	默认值	实现版本
  gdName	作为form表单域的时候的name属性	string	-	0.2.0
  gdSize	单选框的大小,分为'default'和'large'两种	string	'default'	0.5.0
  gdRadioData	生成单选框组的数据	IRadioModel[]	-	0.5.0
  ngModel	默认选中的数据	any	-	0.5.0
  (ngModelChange)	单选框组下单选框状态发生变化后的回调	EventEmitter<any>	-	0.5.0

  IRadioModel接口数据结构

  属性	说明	类型	是否必须
  value	单选框对应的值	any	false
  label	单选框显示的文本	string	true
  disabled	该单选框是否禁用	boolean	false
  checked	该单选框是否选中	boolean	false

  组件使用实例

    radioValue = false;
  
    radioData = [{ value: 'aaa', label: 'aaa', isSelected: false }, { value: 'bbb', label: 'bbb', isSelected: false }, { value: 'ccc', label: 'ccc', isSelected: false }, { value: 'ddd', label: 'ddd', isSelected: false }]
  
    checked = 'aaa';
  
    radioChange(ev) {
      console.log('值发生了变化'+ev);
    }
  
    radioGroupChange(ev) {
      console.log(ev);
    }

    <gd-radio [gdLabel]="'单选框'" [gdValue]="'val'"></gd-radio> <!--普通单选框-->
    <gd-radio [gdLabel]="'单选框'" [gdValue]="'val'" [gdDisabled]="true"></gd-radio> <!--禁用单选框-->
    <gd-radio [gdLabel]="'单选框'" [gdValue]="'val'" [gdBig]="true"></gd-radio> <!--大号单选框-->
    <gd-radio [gdLabel]="'单选框'" [gdValue]="'val'" [ngModel]="radioValue" (ngModelChange)="radioChange($event)"></gd-radio> <!--使用ngModel的单选框-->
    <gd-radio-group [gdRadioData]="radioData" [ngModel]="checked" (ngModelChange)="radioGroupChange($event)"></gd-radio-group> <!--复选框组-->

• gd-select

  下拉框实现 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdSelectData	生成下拉列表的数据	Array<any>	-	0.2.0
  gdHttpUrl	获取生成下拉列表的数据的链接	string	-	0.2.0
  gdHttpUrlParam	获取下拉数据的接口的参数	any	-	0.5.0
  gdDisplayField	显示文本的字段名	string	'label'	0.2.0
  gdValueField	对应的值的字段名	string	'value'	0.2.0
  gdDataField	数据列表的字段名称	string	'data'	0.2.0
  gdChildField	数据中表示子节点的字段名	string	'child'	0.2.0
  gdDisabled	是否禁用下拉列表组件	boolean	false	0.2.0
  gdType	下拉列表的类型，分为列表list和树形tree两种	string	'list'	0.2.0
  gdMultiple	是否为多选下拉	boolean	false	0.2.0
  gdShowBtns	是否显示全选、全部选和反选的头部(仅在gdMultiple为true时才有效)	boolean	false	0.5.0
  gdName	作为form表单域时的name属性	string	-	0.2.0
  gdPlaceholder	下拉列表未选择时显示的提示语句	string	'请选择'	0.5.0
  gdAllowClear	是否显示清除按钮	boolean	false	0.2.0
  gdAllowSearch	是否显示搜索输入框	boolean	false	0.2.0
  gdSize	下拉组件的尺寸，分为'default'和'large'两种	string	'default'	0.5.0
  ngModel	已经选中的下拉组件的值	string/Array<any>	-	0.2.0
  (ngModelChange)	下拉选中值更改之后的回调	EventEmitter<Array<any>>	-	0.2.0

  组件使用示例

    listData = [];
    treeData = [];
    selected = [];
  
    for (let i = 0; i < 10; i++) {
      this.listData.push({
        label: `label${i}`,
        value: `value${i}`,
        disable: (i % 5 === 0) ? true : false,
        select: false
      });
    }
    for (let i = 0; i < 5; i++) {
      const obj = {
        label: 'label' + i,
        value: 'value' + i,
        select: false,
        child: []
      };
      for (let j = 0; j < 5; j++) {
        const o = {
          label: 'label' + i + '-' + j,
          value: 'value' + i + '-' + j,
          select: false,
          child: []
        };
        if (j % 2 === 0) {
          for (let z = 0; z < 5; z++) {
            const oo = {
              label: 'label' + i + '-' + j + '-' + z,
              value: 'value' + i + '-' + j + '-' + z,
              select: false
            };
            o.child.push(oo);
          }
        }
        obj.child.push(o);
      }
      this.treeData.push(obj);
    }
  
    change(ev) {
      console.log(ev);
    }

    <gd-select [gdSelectData]="listData"></gd-select> <!--普通的下拉组件-->
    <gd-select [gdSelectData]="listData" [gdDisabled]="true"></gd-select> <!--禁用下拉组件-->
    <gd-select [gdSelectData]="listData" [gdMultiple]="true"></gd-select> <!--多选下拉组件-->
    <gd-select [gdSelectData]="listData" [gdAllowClear]="true"></gd-select> <!--显示清除按钮的下拉组件-->
    <gd-select [gdSelectData]="listData" [gdAllowSearch]="true"></gd-select> <!--显示搜索框的下拉组件-->
    <gd-select [gdSelectData]="listData" [gdSize]="'large'"></gd-select> <!--大号下拉组件-->
    <gd-select [gdType]="'true'" [gdSelectData]="treeData"></gd-select> <!--下拉树组件-->
    <gd-select [gdSelectData]="listData" [ngModel]="selected" (ngModelChange)="change($event)"></gd-select>

• gd-tab

  选项卡切换组件 实现方式为组件

  gd-tabs组件属性列表

  属性	说明	类型	默认值	实现版本
  gdMode	选项卡的展示方式，分为横向horizontal和纵向vertical两种	'horizontal'	0.2.0
  gdExtraContent	tab组件头部显示的额外的内容	string/TemplateRef<void>	-	0.5.0

  gd-tab组件属性列表

  属性	说明	类型	默认值	实现版本
  gdActive	是否激活该选项块	boolean	false	0.2.0
  gdDisable	是否禁用该选项卡	boolean	false	0.2.0
  gdContent	该选项卡的内容	TemplateRef<any>	-	0.2.0
  gdHeader	该选项卡的头部显示内容	TemplateRef<any>	-	0.2.0

  组件使用示例

    tabs: Array<any> = [{
      active: true,
      disable: false,
      title: 'aaa',
      content: 'bbbb'
    }, {
      active: false,
      disable: false,
      title: 'bbbb',
      content: 'cccc'
    }];
  
    add() {
      tabs.push({
        active: false,
        disable: false,
        title: '新的tab',
        content: '这是一个新的tab的内容'
      });
    }

    <!--普通的tab组件-->
    <gd-tabs> 
      <gd-tab [gdActive]="true">
        <ng-template #gdHeader>
          <span>tab1</span>
        </ng-template>
        <ng-template #gdContent>
          <p>tab1 tab1  tab1</p>
        </gd-template>
      </gd-tab>
      <gd-tab [gdActive]="false">
        <ng-template #gdHeader>
          <span>tab2</span>
        </ng-template>
        <ng-template #gdContent>
          <p>tab2 tab2  tab2</p>
        </gd-template>
      </gd-tab>
    </gd-tabs>
  
    <!--待添加按钮的tab组件-->
    <gd-tabs [gdCanAdd]="true" (addHandler)="add()">
      <gd-tab *ngFor="let item of tabs" [gdActive]="item.active">
        <ng-template #gdHeader>
          <span>{{item.title}}</span>
        </ng-template>
        <ng-template #gdContent>
          <div>tab {{item.content}}</div>
        </ng-template>
      </gd-tab>
    </gd-tabs>

• gd-tags

  标签组件 实现方式为组件

  gd-tag组件属性列表

  属性	说明	类型	默认值	实现版本
  gdColor	标签文字的颜色	string	'black'	0.2.0
  gdBgColor	标签的背景色	string	-	0.2.0

  gd-tags组件属性列表

  属性	说明	类型	默认值	实现版本
  gdTagsData	生成tag标签组的数据列表	ITagModel[]	-	0.2.0

  ITagModel接口数据结构

  属性	说明	类型	是否必须
  label	显示的文本	string	true
  color	显示文本的颜色	string	false
  bgColor	标签的背景色	string	false

  组件使用示例

    tagsData: Array<any> = [];
  
    for (let i = 0; i < 10; i++) {
      this.tagsData.push({
        label: `label${i}`,
        bgColor: 'black',
        color: 'white'
      });
    }

    <gd-tag [gdBgColor]="'orange'" [gdColor]="'blue'">标签啊</gd-tag>
  
    <gd-tags [gdTagsData]="tagsData"></gd-tabs> <!--通过一个列表生成标签组-->

• gd-tree

  树形展示 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdTreeData	生成树组件的数据	any	-	0.5.0
  gdHttpUrl	获取生成树数据的url链接	string	-	0.2.0
  gdHttpUrlParams	获取生成树数据的接口的参数	any	-	0.5.0
  gdDisplayField	显示文本的字段名	string	'label'	0.2.0
  gdValueField	对应值的字段名	string	'value'	0.2.0
  gdDataField	从url获取到的数据中用来生成树的数据的节点名	string	'data'	0.2.0
  gdChildField	子节点的字段名	string	'child'	0.2.0
  gdDefaultExpand	默认展开的节点	any[]	-	0.5.0
  gdDefaultExpandAll	是否默认展开所有节点	boolean	false	0.5.0
  gdDefaultChecked	默认选中的节点	any[]	-	0.5.0
  gdMultiple	是否可以多选	boolean	false	0.2.0
  (gdSelect)	选中之后的回调	EventEmitter<ITreeModel[]>	-	0.2.0

  ITreeModel接口的数据结构

  属性	说明	类型	是否必须
  id	节点的唯一标识	string	true
  expand	节点是否展开	boolean	false
  children	节点的子节点数据	ITreeModel[]	false
  label	节点显示的文本	string	true
  value	节点对应的值	any	false
  disabled	节点是否禁用	boolean	false
  checked	节点是否选中	boolean	false
  originalData	节点对应的原始数据	any	false

  组件使用示例

    treeData = [{
      'label': 'Fusion IO',
      'value': 'Fusion IO',
      'select': false,
      'child': [{
        'label': 'Administrative',
        'value': 'Administrative',
        'select': false,
        'child': [{
          'label': 'Joe Hidden',
          'value': 'Joe Hidden',
          'select': false
        }, {
          'label': 'Ryan Berger',
          'value': 'Ryan Berger',
          'select': true
        }, {
          'label': 'Washington Bird',
          'value': 'Washington Bird',
          'select': false
        }, {
          'label': 'West Weiss',
          'value': 'West Weiss',
          'select': false
        }, {
          'label': 'Price Maynard',
          'value': 'Price Maynard',
          'select': false
        }, {
          'label': 'Georgia Wade',
          'value': 'Georgia Wade',
          'select': false
        }]
      }]
    }];
    selected(ev) {
      console.log(ev);
    }

    <gd-tree [gdTreeData]="treeData" (gdSelect)="selected($event)"></gd-tree> <!--普通的树组件-->
    <gd-tree [gdTreeData]="treeData" [gdMultiple]="true" (gdSelect)="selected($event)"></gd-tree> <!--多选的树组件-->

• gd-upload

  文件上传组件 实现方式为组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdName	作为form表单域时的name属性	string	-	0.2.0
  gdDisabled	是否禁用该上传组件	boolean	false	0.2.0
  gdPlacehloader	控件没有值时显示的提示语句	string	'请选择文件'	0.2.0
  gdUploadUrl	上传文件的地址	string	-	0.2.0
  gdUploadUrlParam	上传文件的参数	any	-	0.5.0
  ngModel	上传组件的值	any	-	0.2.0
  (ngModelChange)	上传组件值发生变化的回调	EventEmitter<any>	-	0.2.0

  组件使用示例

    <gd-upload [gdUploadUrl]="'http://baidu.com/upload'"></gd-upload> <!--上传组件-->

• gd-table

  数据展示表格 实现方式为组件 内核调用的是@swiming/ngx-datatable组件

  组件属性列表

  属性	说明	类型	默认值	实现版本
  gdRightMenus	表格的右键菜单功能列表数据	IDataTableRightMenu	-	0.5.0
  gdPageSize	表格的页容量（默认通过表格所在区域计算出来）	number	-	0.2.0
  gdShowPager	是否显示分页组件	boolean	false	0.2.0
  gdHeaderData	表格头部显示的数据	IDataTableHeader[]	-	0.5.0
  gdTableData	生成表格的数据	any[]	-	0.5.0
  gdHttpUrl	获取生成表格数据的链接(如果有值 优先使用)	string	-	0.2.0
  gdHttpUrlParams	获取数据连接的参数	any	-	0.5.0
  gdTotalCount	总数据数量	number	-	0.5.0
  gdDataField	链接获取的数据中的用来生成表格数据的字段名	string	'data'	0.2.0
  gdTotalField	链接获取的数据中表示总数据量的字段名	string	'totalCount'	0.5.0
  gdEnableEdit	是否启用编辑	boolean	false	0.2.0
  (pagerChange)	启用分页组件的时候页数跳转时的回调	EventEmitter<number>	-	0.2.0
  (singleClick)	行的单击事件	EventEmitter<any>	-	0.2.0
  (doubleClick)	行的双击事件	EventEmitter<any>	-	0.2.0
  (dataReady)	通过url链接获取数据成功之后的回调	EventEmitter<void>	-	0.2.0
  (dataChange)	启用编辑时表格的数据发生改变时的回调	EventEmitter<void>	-	0.2.0

  IDataTableRightMenu接口数据结构

  属性	说明	类型	是否必须
  label	显示的文本	string	true
  callback	项的点击回调	(e: MouseEvent, item: any) => void	true

  IDataTableHeader接口数据结构

  属性	说明	类型	是否必须
  label	显示的标题文本	string	true
  prop	该列显示数据的列名	string	true
  type	该列启用编辑时的编辑类型，分为文本输入(input),时间选择(date),下拉列表(select),下拉树(select-tree),数字输入(number)和复选框(checkbox)	string	false
  list	当type值为select或者select-tree的时候，给下拉组件传入的生成组件的数据	any	false
  dependCol	当前列的数据在编辑的时候依赖的列的名字	string	false
  httpUrl	当type值为select或者select-tree的时候，给下拉组件传入的获取数据的链接	string	false
  httpUrlParam	下拉组件获取数据时的参数	any	false
  isMultiple	当type值为select或者select-tree的时候，下拉组件是否为多选	boolean	false
  dataTransform	对展示的数据格式化的函数	(val: any) => String	false

  组件使用示例

    header = [{
      label: '测试列1',
      prop: 'test1',
      type: 'input'
    }, {
      label: '测试列2',
      prop: 'test2',
      type: 'select',
      list: [{
        label: '测试列2值1',
        value: '测试列2值1'
      }, {
        label: '测试列2值2',
        value: '测试列2值2'
      }]
    }, {
      label: '测试列3',
      prop: 'test3',
      type: 'number'
    }, {
      label: '测试列4',
      prop: 'test4',
      type: 'datetime'
    }];
    table = [{
      test1: '测试列1值1',
      test2: '测试列2值1',
      test3: 12,
      test4: '2012-12-12'
    }, {
      test1: '测试列1值2',
      test2: '测试列2值2',
      test3: 14,
      test4: '2018-01-02'
    }];
  
    dataChange(data) {
      console.log(this.table);
    }

    <gd-default-table 
      [gdHeaderData]="header" 
      [gdTableData]="table"
      [gdEnableEdit]="true"
      [gdShowPager]="true"
      (dataChange)="dataChange($event)"></gd-default-table>

• gd-textover

  文本溢出组件 实现方式为组件

  gd-textover属性列表

  属性	说明	类型	默认值	实现版本
  gdText	显示的文本	string	-	0.5.0
  gdCanEdit	显示的文本是否可以编辑	boolean	false	0.5.0

  组件使用示例

    <gd-textover [gdText]="'ssasadasdgjaslkdg'"></gd-textover>  <!--普通的textover组件-->
    <gd-textover [gdText]="'ssasadasdgjaslkdg'" [gdCanEdit]="true"></gd-textover> <!--可以编辑文本的textover组件-->