如何使用界面控件DevExtreme自定义基于HTML的组件？这里有答案

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

本文介绍自定义基于HTML的UI组件的方法。

DevExtreme v22.1正式版下载

组件的API

官方建议使用UI组件的API来自定义它，与CSS类不同，API很少被更改。如果发生更改，UI组件将用警告填充浏览器控制台，帮助开发人员修复代码。

每个UI组件都有一个在UI组件的API参考部分中描述的API，例如开发人员可以通过相应的属性指定UI组件的宽度。在下面的例子中，这个属性是为List UI组件设置的。

jQuery

JavaScript

$(function() {
$("#listContainer").dxList({
width: 600
});
});

ASP.NET MVC控件

Razor C#

@(Html.DevExtreme().List()
.Width(600)
)

如果页面包含同一个UI组件的多个实例，开发人员可以使用defaultOptions(rule) 方法在一个地方为所有这些组件指定默认配置，相同的方法允许开发者为不同的设备指定不同的默认配置。

此外，UI组件提供了可以用于更深入自定义的模板。

单个CSS类

由于DevExtreme组件包含标准的HTML元素（<div>, <td>, <tr>等），所以开发人员可以使用CSS来自定义它们。

文档中记录了许多类，但是在大多数情况下，开发人员需要检查HTML标记来确定和覆盖应用的CSS类。

可以像往常一样使用class属性将类添加到标记中的UI组件元素中，如果不可能更改标记，则使用UI组件的elementAttr属性来实现相同的目的。

注意：CSS内部结构可能在不同版本之间更改而不另行通知。考虑到这一点，我们建议在可能的情况下使用它们的API替代CSS来自定义UI组件。因为如果API发生了更改，开发人员将收到通知。

在自定义过程中，建议通过响应式设计模式查看UI组件页面再不同设备上的外观。