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組件的多個實例，開發人員可以使用 方法在一個地方為所有這些組件指定默認配置，相同的方法允許開發者為不同的設備指定不同的默認配置。

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

單個CSS類

由于DevExtreme組件包含標準的HTML元素（<div>, <td>, <tr>等），所以開發人員可以使用CSS來自定義它們。

 文檔中記錄了許多類，但是在大多數情況下，開發人員需要檢查HTML標記來確定和覆蓋應用的CSS類。

可以像往常一樣使用class屬性將類添加到標記中的UI組件元素中，如果不可能更改標記，則使用UI組件的屬性來實現相同的目的。

注意：CSS內部結構可能在不同版本之間更改而不另行通知。考慮到這一點，我們建議在可能的情況下使用它們的API替代CSS來自定義UI組件。因為如果API發生了更改，開發人員將收到通知。

在自定義過程中，建議通過響應式設計模式查看UI組件頁面再不同設備上的外觀。

DevExpress技術交流群6：600715373      歡迎一起進群討論