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组件-->
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago