在本文中，我們將回顧DevExtreme UI組件在v22.2版本主要更新中一系列與自定義相關的增強。

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExtreme v22.2正式版下載

DevExpress技術交流群8：523159565      歡迎一起進群討論

驗證消息位置

用戶可以使用新的選項來指定驗證消息相對于編輯器輸入位置的位置，該選項接受以下值：

• 'bottom' （默認）
• 'top'
• 'left'
• 'right'

React

<TextBox validationMessagePosition="right">
<Validator>
<RequiredRule message="Address is required" />
</Validator>
</TextBox>

折疊 - 單個項目的標題模板

現在可以為單個項目定義Accordion標題模板(通過為每個項目使用 屬性)，在下面的圖片中，第一項的標題使用了不同的樣式：

React

<Accordion ... >
<Item
titleRender={() => (<b>First item title</b>)}
>
Item content
</Item>
</Accordion>

復選框 - 循環通過三個狀態

v22.2附帶了一個額外的 值更改模式。在這種模式下，每次點擊循環通過三個組件狀態：檢查、未檢查和不確定。

使用選項來啟用這個功能。

Angular

<dx-check-box
[enableThreeStateBehavior]="true"
[value]="null"
></dx-check-box>

表單 - 自定義標簽模板

之前Form組件只能顯示文本標簽，現在可以使用標簽了。屬性來定義自定義模板，并在編輯器的標簽中顯示圖像或其他豐富內容。

Vue

<DxForm ... >
<DxItem ... >
<DxLabel template="emailLabel"/>
</DxItem>
<template #emailLabel="{ data }">
<LabelTemplate
:data="data"
icon="email"
/>
</template>
</DxForm>

DateBox — 自定義Today按鈕文本

用戶現在可以更改 Today 按鈕顯示的文本（在'date'和'datetime'模式下），只需將帶有自定義文本的字符串傳遞給 屬性。

React

<DateBox
type="datetime"
todayButtonText="This very day"
/>

范圍條形圖 - 最小條形尺寸

如果范圍條形圖數據源中的最小值與最大值有很大差異，則使用小條形顯示小值(使交互變得困難)。在這種情況下，您可以使用新的 屬性來指定以像素為單位的最小條大小。

<dx-chart ... >
<dxo-common-series-settings ...
[minBarSize]="2"
></dxo-common-series-settings>
</dx-chart>