1. Ng DevUI 14.1.0 版本介绍
Ng DevUI 是一种基于 Angular 的企业级前端框架，致力于提供高效的前端开发工具和优秀的用户体验。Ng DevUI 14.1.0 版本是该框架的最新版本，于 2022 年 8 月发布。该版本包括以下几个新特性。
2. 支持富文本编辑器
Ng DevUI 14.1.0 版本增加了对富文本编辑器的支持，现在可以使用 NgDevUIEditor 组件实现基础文本编辑和格式化文本编辑。不同于其他编辑器，NgDevUIEditor 采用了 Angular 的构造方式，在设计时所产生的一系列丰富的组件和模块，为基于 Angular 的应用的新代码提供了许多支持。
2.1 NgDevUIEditor 组件的主要功能
NgDevUIEditor 组件的主要功能包括：
支持键盘鼠标快捷键
行内样式、块级格式的编辑
颜色、字体、大小等字体样式修改
支持截图、复制和粘贴功能
支持拖拽上传图片和文件
支持插入表格
import { Component } from '@angular/core';
import { DeeEditorOption } from 'ng-devui/editor';
@Component({
selector: 'app-demo-edit',
templateUrl: './test-edit.component.html',
styleUrls: ['./test-edit.component.less']
})
export class DemoEditComponent {
editorData = 'Hello World!';
options: DeeEditorOption = {
placeholder: '请输入正文',
toolbar: [
'bold', 'italic', 'strikethrough', 'underline', 'forecolor', 'backcolor',
'|',
'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
'|',
'insertUnorderedList', 'insertOrderedList', 'blockquote',
'|',
'undo', 'redo', 'removeFormat'
]
};
onContentChange($event) {
console.log('onContentChange', $event);
}
onBlur($event) {
console.log('onBlu', $event);
}
onFocus($event) {
console.log('onFocus', $event);
}
}
3. 基于创新 UI 主题可扩展性的样式修改器
Ng DevUI 14.1.0 版本新增了一种基于创新 UI 主题可扩展性的样式修改器，灵活地选择更适合自己的配色方案，从而有效提升用户体验，设计者在颜色搭配和设计时，可以参考这个样式修改器中的预设样式或者对其进行自定义修改。
3.1 样式修改器的主要特性
样式修改器的主要特性包括：
可以通过调节 6 个颜色参数来打造不同的风格
支持主题颜色动态切换
支持 pre-built 预构建的模板和自定义模板
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
4. 可缩放、可滚动的表格
Ng DevUI 14.1.0 版本新增了一种可缩放、可滚动的表格，表格中的单元格可以根据其内容进行缩放，而不必为固定行高而困扰。在配置有大量数据的渲染表格时尤其有用。在这种情况下，只有在滚动时才会渲染视野中可见的行。
4.1 表格的主要特性
表格的主要特性包括：
支持缩放，单元格高度根据内容进行自适应
支持超长内容，支持自适应列配置
支持虚排列进行性能优化
可以监测滚动到视野内的单元格，进行图片和视频的懒加载
import { Component } from '@angular/core';
@Component({
selector: 'd-demo-overview-demo-table-scroll',
templateUrl: './table-scroll.component.html',
styleUrls: ['./table-scroll.component.scss']
})
export class DemoTableScrollComponent {
dataSource: any[] = [];
constructor() {
}
ngOnInit() {
// 模拟数据量增大
for (let i = 0; i < 100000; i++) {
this.dataSource.push({
name: `name${i}`,
age: 1 + Math.round(Math.random() * 100),
address: `address ${Math.round(Math.random() * 100)}`
});
}
}
trackByFn(index, item) {
return index;
}
}
5. 高度可定制的自动完成组件
Ng DevUI 14.1.0 版本改进了自动完成组件，现在通过 NgDeautoComplete 组件可以完成整体组件的高度设置以及自定义面板的样式。
5.1 NgDeautoComplete 组件的主要功能
NgDeautoComplete 组件的主要功能包括：
灵活的组件内 CSS 样式设置
大量的自定义选项，包括大小、角度以及每个项的内容
丰富的事件机制和样式特性
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-compact',
templateUrl: './test-compact.component.html'
})
export class DemoCompactComponent {
autoConfig = {
autoActiveFirstOption: true,
valueProperty: 'name',
searchProperty: 'name'
};
label = '';
options1 = [
{
name: 'Java'
},
{
name: 'JavaScript'
},
{
name: 'Python'
},
{
name: 'Kotlin'
},
{
name: 'Ruby'
}
];
searchOptions = [];
filterChange(term) {
console.log(term);
this.searchOptions = term ? this.options1.filter(option => option.name.toLowerCase().indexOf(term.toLowerCase()) !== -1) : [];
}
change(value: any) {
console.log(`current value:${value}`);
}
valueChanged(value: any) {
console.log(`value is changed to:`, value);
}
}
6. 总结
Ng DevUI 14.1.0 版本的新特性为开发者提供了更加便捷和高效的开发工作，富文本编辑器、可缩放、可滚动的表格等组件的加入，可以在数据展示和交互上更加强大和灵活。多样化、高度可扩展的 UI 样式更能满足设计师对各类组件样式的要求。除此之外，多样性菜单的组件选择、完善的事件机制、丰富的插件等都为开发者提供极大的便利性。