devcloudfe/ng-devui

Angular UI Component Library based on DevUI Design

DevUI for Angular

The DevUI Design Design system contains a combination of DevUI rules, Design languages, and best practices. DevUI Design allows developers to focus more on application logic, while designers focus on user experience, interactions, and processes.

Features

• Enterprise components, supporting design specifications, font icon library
• Out of the box

To see more in devui.design.

Angular Support

Now supports Angular ^16.0.0

Getting Started

1. Create a new project

ng new New-Project

2. Installation:

$ cd New-Project
$ npm i ng-devui
# font icon library
# $ npm i @devui-design/icons

3. Usage:

import { BrowserModule } from '@angular/platform-browser';
// need for animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { DevUIModule } from 'ng-devui';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

4. Import devui style into angular.json file:

{
  "styles": [
    ...
    "node_modules/ng-devui/devui.min.css"
  ]
}

5. Debugging

ng serve --open

Contribution

Please feel free to contribute code or discuss your idea!

Please make sure you read the contributing guide before making a pull request.

We appreciate all contributors who helped us build DevUI.

Support

Modern browsers and Internet Explorer 11+.

IE / Edge	Firefox	Chrome	Safari	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Partner project

• H5-Dooring - 让H5制作，更简单

Who use it

LICENSE

MIT

ng-devui's Issues

可以加个流程图组件吗

可以加个流程图组件吗

没有react vue版的计划吗？

没有react vue版的计划吗？

documentation page can not open right.

recurrent link: recurrent link

[疑问]switchWhileCrossEdge这个属性设置true或者false都有越边交换的效果

在DragDrop拖拽组件的第4个demo中：
https://devui.design/components/dragdrop/demo#cross-edge-switching

switchWhileCrossEdge这个参数不管设置成true还是false，或者不设置，都有越边交换的效果，请问这是怎么回事呢？

一旦我把dSortable指令去掉，就没有越边交换的效果，感觉越边交换不是由switchWhileCrossEdge决定，而是由dSortable指令决定的。

select下拉选择提供类似于treeselect树形选择框的treeNodeIdKey、treeNodeTitleKey属性

组件 绑定对象时，最好能可以指定对象结构。像treeselect树形选择框的treeNodeIdKey、treeNodeTitleKey属性这样。

bug(DatePicker): 弹出层动画层级关系错乱

问题: 关闭DatePicker的时候，底层UI元素遮挡住弹出层
建议: 弹出层不透明

官网打开很慢

每次打开DevUI官网首页https://devui.design都要花5-6秒时间，有时甚至要20-30秒，建议优化

按钮设置禁用后，点击仍然可以触发click事件

部分模块未考虑到浏览器兼容问题

例如：/devui/modal/movable.directive.ts
文件中的event.clientY以及event.clientX 是没办法保证一定能够得到期望值

ImagePreview 图片预览组件点击放大不显示图片

ImagePreview 图片预览组件点击放大不显示图片
正常点击图片放大后这样，官网例子

然后就这样了

html代码

app.module.ts 部分相关代码
import { AppComponent } from './app.component';
import { DevUIModule } from 'ng-devui';

@NgModule({
declarations: [
AppComponent
],
imports: [
DevUIModule
],

建议

简单试用了几天，小结下：
总体来说，此框架轻量简洁美观，很适合做基础库来封装。下面是一点点建议。
（有些问题可能是本人api没了解全面所致，如有请忽略）

关于Select
只有fileterKey, 有valueKey么?

说明：
实际场景， 绑定源是 字典， 显示是字典的name， 选中后把字典的id或code传出去。
如果没有valueKey，这一步将很困难。

另外，就算选中项是对象，没有comparer，怎么标记选中呢？select如何支持async数据源？

Loading
loading的指示变量过于智能，比如支持promise, subscription...然而我现在有一个场景就是自已用bool类型管理的，然后？

关于导航
缺失导航控件。现在的手风琴并不能做菜单使用，没有配置icon的地方，除非自已封装。

关于MessageService之类的
缺少全局的AlertService和ToastService。
缺少全局ToastService，在http-intercepter中拦截到错误要报，会相当麻烦;
现在前两者我在AppComponent的模板中放了Container，然后通过一个全局单例的Service与之交互的；
可参见NgZorro

Table
Table是使用频率最高之一，个人感觉常用功能都具备了。
现在基于此封装的可以支持不同显示类型和格式化的新table用起来挺方便的。
Table建议添加format功能，不用每次显示number或日期，都要单独重载模板吧。

关于主题
现在似乎没法修改主题配色，也没法在项目中引用 颜色变量。
主题系统很多，个人觉得使用scss变量没有使用style variable好，后者不用import, 编译，最重要的是可以在模块中使用，也方便修改，ionic就是这样的。
(事实上，就是因为ngAlain的9的主题编译实在太无语了(巨慢巨费内存)，我才决定重新寻求一个轻量级的框架的。)

d-radio不显示

htm文件l:

ts文件:
fg:FormGroup;
types:[{name:"菜单",value:1},{name:"方法",value:2}]
constructor(private fd: FormBuilder) {
this.fg = this.fd.group({
mod_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
action_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
command_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
show_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
type: ['', Validators.required],
});
}
get fgControl() {
return this.fg.controls;
}

angular version : 9.1.12

结果：d-radio 不显示，也不报错

开发者工具：

希望可以支持侧边栏布局，主题切换之类的功能。

可以支持新的组件嘛(JSON FROM) 动态表单

可以支持新的组件嘛(JSON FROM) 动态表单
基于json-schema

Upload component error

I configure the Upload component exactly as in the example configuration, but reported the following error in the file MultipleUploadComponent.html:

ERROR TypeError: Cannot read property 'multiple' of undefined

The following is related information:

Version

"@angular/cli": "~7.0.2",
"@angular/core": "~7.0.0",
"typescript": "~3.1.1"
"ng-devui": "^7.0.0-rc.1",

Configure

component.html:

    <ave-multiple-upload
      #multipleupload
      [fileOptions]="fileOptions2"
      [uploadedFiles]="uploadedFiles2"
      [filePath]="'name'"
      [uploadOptions]="uploadOptions2"
      (onSuccess)="onSuccess2($event)"
      (onDeleteUploadedFile)="deleteUploadedFile2($event)"
      (onError)="onError2($event)">
    </ave-multiple-upload>

component.ts:

import { IFileOptions, IUploadOptions } from 'ng-devui/upload/file-uploader.types';

  additionalParameter2 = {
    name: 'tom',
    age: 11
  };
  uploadOptions2: IUploadOptions = {
    uri: 'http://localhost:3000/upload',
    method: 'post',
    additionalParameter: this.additionalParameter2,
    maximumSize: 20,
    checkSameName: true
  };
  fileOptions2: IFileOptions = {
    multiple: true,
    accept: '.xls,.xlsx,.pages,.mp3,.png',
  };
  uploadedFiles2: Array<Object> = [];

  onSuccess2(result) {
    console.log(result);
  }

  onError2(error) {
    console.log(error);
  }

  deleteUploadedFile2(filePath: string) {
    console.log(`delete ${filePath}`);
  }

  fileDrop(files) {
    console.log(files);
  }
  fileOver(event) {
    console.log(event);
  }

Error

上传控件显示问题

背景：
将官方文档中上传控件的Demo复制到本地运行

问题：
1、选择上传的文件后需重新点击一下，才会出现文件名
2、显示出文件名后没有显示删除图标[x]

代码：

<d-form-item>
            <d-form-label>PrdSN</d-form-label>
            <d-form-control>
                <d-single-upload
                    #singleuploadDrag
                    [enableDrop]="true"
                    [fileOptions]="fileOptions2"
                    [uploadedFiles]="uploadedFiles"
                    [uploadOptions]="uploadOptions"
                    [placeholderText]="'请拖动文件上传'"
                    [withoutBtn]="true"
                    [filePath]="'name'"
                    [beforeUpload]="beforeUploadFn"
                    (successEvent)="onSuccess($event)"
                    (deleteUploadedFileEvent)="deleteUploadedFile($event)"
                    (errorEvent)="onError($event)"
                    (fileDrop)="fileDrop($event)"
                    (fileOver)="fileOver($event)"
                >
                </d-single-upload>
            </d-form-control>
        </d-form-item>

@ViewChild('singleuploadDrag', { static: true })
  singleuploadDrag: SingleUploadComponent;
  public beforeUploadFn: Function;
  additionalParameter = {
    name: 'tom',
    age: 11,
  };
  // accept all file types
  fileOptions: IFileOptions = {
    multiple: false,
  };
  fileOptions2: IFileOptions = {
    multiple: false,
    accept: '.png,.zip',
  };
  fileOptions3: IFileOptions = {
    multiple: false,
    accept: 'application/json,image/*,.csv',
  };
  uploadedFiles: Array<Object> = [];
  uploadOptions: IUploadOptions = {
    uri: '/upload',
    headers: {},
    additionalParameter: this.additionalParameter,
    maximumSize: 0.5,
    method: 'POST',
    fileFieldName: 'dFile',
  };

  constructor(
    private conditionService: ConditionService,
    private dialogService: DialogService,
    private http: HttpClient
  ) {
    this.beforeUploadFn = this.beforeUpload2.bind(this);
  }

  onSuccess(result) {
    console.log(result);
  }

  beforeUpload(file) {
    console.log(this); // this指向SingleUploadComponent
    console.log(file);
    return false;
  }

  beforeUpload2(file) {
    console.log(this); // this指向BasicComponent
    console.log(file);
    return true;
  }

  onError(error) {
    console.log(error);
  }

  deleteUploadedFile(filePath: string) {
    this.http.delete(`/files/${filePath}`).subscribe(() => {
      console.log(`delete ${filePath}`);
    });
  }

  fileDrop(files) {
    console.log(files);
  }
  fileOver(event) {
    console.log(event);
  }
  customUploadEvent() {
    this.singleuploadDrag.upload();
  }

图标库怎么使用

Describe the bug
按照说明 @devui-design/icons已安装，angular.json 中 "node_modules/ng-devui/devui.min.css" 已引用。但 icon 属性引用的字体图标不显示，也不报错。请问下应该怎么使用。
<d-button icon="icon-add" bsStyle="primary"> 新建 </d-button>

类似样例中这样。
样例：<span _ngcontent-rnn-c74="" class="devui-icon-fix icon icon-add clear-right-5 ng-star-inserted"></span>
我的 <span _ngcontent-sco-c66="" class="devui-icon-fix icon icon-add clear-right-5" ng-reflect-ng-class="[object Object]"></span>
class 少了 ng-star-inserted。
To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

environments (please complete the following information):

• Browser [e.g. chrome 80, safari]
• component version [e.g. 8.0.0]
• angular framework version [e.g. 8.0.0]

Additional context
Add any other context about the problem here.

dateFormat设置为“YYYY-MM-DD”时显示异常

DatePicker 日期选择器使用时将dateFormat设置为“YYYY-MM-DD”，获取到的时间显示为YYYY-04-DD。也就是说只有月份显示正常。
复现步骤和demo就不写了，我这边只需将dateFormated = 'YYYY-MM-DD';就会出现

[email protected]
windows 10
chrome 80.0.3987.149（正式版本） （64 位）

解决方案 dataFormat设为 yyyy-MM-dd就正常了

d-select 怎么使用响应式表单

d-select 中没有value属性，我的数据源是一个对象数组，有 name 和 id 属性。设想是显示name属性, value是id.
假定绑定的controllerName是 parent_id, 是数据源的id值，因为是编辑操作，现在parent_id是有一个值，这要怎么操作???

validate.type.d.ts:15:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

空项目，加载DevUIModule后，编译的时候过不去，不知道别人有遇到没
Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string
| number | boolean | RegExp | ValidatorFn | DValidatorFn'.

15 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:16:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

16 validator?: DValidatorFn | ValidatorFn;

有计划提供一个通用的后台模板吗

有计划提供一个通用的后台模板吗

d-checkbox [label] 属性不能赋值中文

Describe the bug
A clear and concise description of what the bug is.
<d-checkbox name="rememberme" [label]="记住我" >

typescript 编译报错

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

environments (please complete the following information):

• Browser [e.g. chrome 80, safari]
• component version [e.g. 8.0.0]
• angular framework version [e.g. 8.0.0]

Additional context
Add any other context about the problem here.

这个后台应用居多吧，考虑过增加layout吗？

另外，打包后的体积有点大哦，什么都没写，添加依赖后直接打包，居然有30多M

表格报错

加了这个 [fixHeader]="true"会报以下错误

原因应该同表格内容无关，因为都是最基础的，没有加任何多余的属性

datatable设置[virtualScroll]="true"报错

datatable设置[virtualScroll]="true"后，console显示如下错误，并且不加载数据
ERROR TypeError: table.rows[0] is undefined
buildFakeTable ng-devui-data-table.js:4650
renderFixFakeTableEl ng-devui-data-table.js:4637
ngOnChanges ng-devui-data-table.js:4381
Angular 40
RxJS 5
Angular 9
core.js:6228:19

DataTable error when enabled both "resizeable" and "fixHeader"

Describe the bug
DataTable error when enabled both "resizeable" and "fixHeader"

To Reproduce

Steps to reproduce the behavior:

1. add
2. set [resizeable] to true
3. set [fixHeader] to true
4. it is possible that there is a error message on Console. I am not clear the side effect because of this.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
this is the output from chrome

environments (please complete the following information):

• chrome 84
• devui 9.1.0
• angular framework version 10.0.2

Additional context
NONE

Style missing

Could you explain how to import styles?

Angular CLI: 11.0.3 安装 ng-devui 10.0 后ng build报错。

Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:14:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

14 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number |
boolean | RegExp | ValidatorFn | DValidatorFn'.

15 validator?: DValidatorFn | ValidatorFn;
~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:16:5 - error TS2411: Property 'message' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

16 message?: string;
~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:17:5 - error TS2411: Property 'errorStrategy' of type '"pristine" | "dirty" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

17 errorStrategy?: DValidationErrorStrategy;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:18:5 - error TS2411: Property 'priority' of type 'number | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

18 priority?: number;
~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:19:5 - error TS2411: Property 'isNgValidator' of type 'boolean | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

19 isNgValidator?: boolean;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:20:5 - error TS2411: Property 'validateLevel' of type '"error" | "warning" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.

20 validateLevel?: 'error' | 'warning';
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:24:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

24 id?: string;
~~
number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

25 validator?: DAsyncValidatorFn | AsyncValidatorFn;
~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:26:5 - error TS2411: Property 'message' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

26 message?: string;
~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:27:5 - error TS2411: Property 'errorStrategy' of type '"pristine" | "dirty" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

27 errorStrategy?: DValidationErrorStrategy;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:28:5 - error TS2411: Property 'priority' of type 'number | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

28 priority?: number;
~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:29:5 - error TS2411: Property 'isNgValidator' of type 'boolean | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

29 isNgValidator?: boolean;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:30:5 - error TS2411: Property 'validateLevel' of type '"error" | "warning" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.

30 validateLevel?: 'error' | 'warning';
~~~~~~~~~~~~~

是否有必要做组件库单元测试

如果组件库不做单元测试,后期维护如何保障应用不会出问题. 如: table, form, tree,date,...这些比较大型的组件. Angular 对 tslint的支持后期可能会过渡到 eslint上

后期会增加layout相关的功能吗？这个后台应用居多吧，有layout会方便很多。

另外，打包后的体积有点大哦，空项目，只引入依赖devui，什么都没写，打包后的体积就有30多M哦

发现TreeSelect 树形选择框组件疑似有问题(链接已更新)

疑似问题GIF已更新

是否有考虑实现后台管理示例

请问是否考虑实现后台管理的示例项目，还有请问有官方的交流群么。qq wt dd也行啊

radio 选项切换之前支持添加一个回调功能

全屏组件d-fullscreen整死使用不了

8.0环境和9.0环境都试了都不行，
问题1：看了dto文件是不是没导出到devui.module.d.ts
问题2：官网的demo是可以的，我到本地环境就报错：如下图

发誓，我公共依赖中引用了DevUIModule的，我用stackblitz和新建的项目不管是8.0和9.0环境都有这个报错，是我引用方式不对么，求大佬支招，或者给个stackblitz能用的demo，感激不尽，喜极而泣

日期选择回调问题

当前只有回调selectedRangeChange()方法获取值改变，但是上图这种需要点击【确定】时候再取回调。

官方现在暂时给出的解决办法是：

reason为2的时候是点击的确定回调。

[Tooltip]希望增加hover时的延迟

目前Tooltip的实现缺少hover延时，每次鼠标不小心经过目标元素就会显示出Tooltip的内容（然后又很快消失），有点打断用户，影响用户体验，希望能增加适当的延时。

Checboxgroup radioGroup 值缺少 valueKey. labelKey. 用于值和名称的获取

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

checkboxGroup 值 可以是这样

[
 {name: 'name1', value: 'value1', checked: false},
 {name: 'name2', value: 'value3', checked: false}
]

也可以这样, 当用到了 valueKey时, valueKey可以是字符串也可以是回调函数
[
'value1',
'value3',
]

Screenshots
If applicable, add screenshots to help explain your problem.

environments (please complete the following information):

• Browser [e.g. chrome 80, safari]
• component version [e.g. 8.0.0]
• angular framework version [e.g. 8.0.0]

Additional context
Add any other context about the problem here.

筛选框样式问题

选择数量较少时候有样式问题

应该表现样式为：

修改方式：在类‘devui-dropdown-menu‘ 或’ devui-dropdown-overlay’最小高度改为165左右即可，2个选项应该是最少的情况。

devui.design站点开源请求

希望能开源或者增加github.io发布，方便本地部署，查看组件介绍；

datepicker键盘导航

键盘方向键 导航不起作用,按TAB不能关闭已经弹窗的

时间选择器显示异常问题

因@devui-design/[email protected]中增加了display: inline-block，导致时间选择器显示错位

文件路径：node_modules/@devui-design/icons/icommon/devui-icon.css

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'devui-icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  **display: inline-block;**

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

关于数据过多导致的树形选择器加载缓慢的问题

之前使用到Tree Select的时候，发现treeNodes 数据过多会严重拖慢页面的流畅性，希望能够做一个数据缓冲区，来处理不必要的dom生成

使用最新的组件库-报错

radio 选项切换之前希望支持一个回调功能

通过回调判断是否可以正常切换(boolean, false: 表示不能切换),默认是可以正常切换.

一些建议和需求

• 主要是button按钮在点击或划过时，一些动画或过渡效果，不是很缓和。(参照效果https://material.angular.cn/components/button/examples）

• 抽屉组件，那个平滑打开的效果，第一次打开的时候，过度的效果感觉不出来，第二次有感觉了，其实，过渡时间可以稍微延长一点点。
  （参照效果：https://material.angular.cn/components/sidenav/examples）

• 增加时间轴UI组件
  -增加顶部全局提示（参照功能：https://ng.ant.design/components/message/zh）

以上是我的一些建议，希望能够有所帮助。加油！！！！

Splitter “错乱”

Describe the bug
测试用orientation=vertical，三个splitter-pan，每个都 [collapsible]="true"。

1. 多次点击不同的箭头，可能某一个区域就怎么也点不回来了。如图1，怎么也找不回来“下”了，两个箭头点上面的隐藏”上“，点下面的隐藏“中”。
2. 图二，[collapsible]="true" 每次只能设置一个，就是这么设计的么？如果是这样的话，问题1例的问题。。就很奇怪了。

    spliterTest = [
        {
            size: '30%',
            collapsed: false,
            text: '上',
            min: '5%',
        },
        {
            size: '30%',
            collapsed: true,
            text: '中',
            min: '5%',
        },
        {
            size: '40%',
            collapsed: true,
            text: '下',
            min: '5%',
        },
    ];

    <d-splitter style="height: 900px; border: 1px solid #e3e5e9;" orientation="vertical">
        <d-splitter-pane
            *ngFor="let pane of spliterTest"
            [size]="pane.size"
            [minSize]="pane.min"
            [collapsible]="true"
            [collapsed]="pane.collapsed"
        >
            <div class="pane-content">
                <h2>{{ pane.text }}</h2>
            </div>
        </d-splitter-pane>
    </d-splitter>

3.接问题2，无法拖拽。有时候拖拽过程中

Expected behavior

1. 可以隐藏多个
2. 最好能。。单个或者多个隐藏时候仍然可以正常拖拽

Screenshots
图1

图2

Additional context
辛苦了。。加油

Angular CLI创建项目引入DevUI后ng build报错。

当Angular CLI创建项目时，会出现如下提示：
Would you like to add Angular routing?

如果选择Y时，按官网引入DevUI后，ng build会报错。

Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:14:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
14 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number |
boolean | RegExp | ValidatorFn | DValidatorFn'.
15 validator?: DValidatorFn | ValidatorFn;

如果选择N时，按官网引入DevUI后，ng build会警告。

Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-theme.js depends on 'enquire.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-utils.js depends on 'date-fns/format'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-utils.js depends on 'date-fns/parse'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
不知道是否有解决办法？

是否考虑丰富基础组件类型

我看了一下官网的组件，有一些基础组件，我觉得有必要扩充一下。
按钮组件
状态：基于红橙黄绿青蓝紫常见七色，来表示按钮的状态，这样会比较丰富
类型：实心、空心、虚线边框按钮、无边框等按钮
内容：纯文本、icon、icon + 文本
形状：长方形、圆形等
尺寸：大、中、小（官网已经有了）

布局，是否考虑加入栅格布局，现在栅格布局还是应用很广泛的

希望可以早日提供Angular9.0,的支持，目前升级到ng9依赖有找不到的情况

表格部分

1.当表格 [fixHeader]="true" 同时[colDraggable]="true"时 拖动列报错
core.js:6228 ERROR TypeError: Cannot read property 'parentNode' of undefined at HTMLHtmlElement.DataTableHeadComponent.startBecauseMouseMoved (ng-devui-data-table.js:3479) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1647) defaultErrorLogger @ core.js:6228 handleError @ core.js:6281 next @ core.js:42614 schedulerFn.__isAsync @ core.js:37119 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:37079 zone.runOutsideAngular @ core.js:41694 invoke @ zone-evergreen.js:364 run @ zone-evergreen.js:123 runOutsideAngular @ core.js:41488 onHandleError @ core.js:41691 handleError @ zone-evergreen.js:368 runTask @ zone-evergreen.js:170 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647 core.js:6228 ERROR TypeError: Cannot read property 'style' of undefined at HTMLHtmlElement.DataTableHeadComponent.release (ng-devui-data-table.js:3498) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1658)
2. 能否增加表格的边框功能(单元格显示边框)而非只有行显示边框