目前我們的表單只能顯示文本標(biāo)簽，然而一些用戶需要在編輯器標(biāo)簽中顯示圖像或其他豐富的內(nèi)容。為了滿足這一需求，在新版本中引入自定義標(biāo)簽?zāi)０澹@將利用許多DevExtreme組件中使用的技術(shù)——允許開發(fā)人員自定義應(yīng)用程序UI的技術(shù)。為了幫助說明此功能的好處，下面的表單標(biāo)簽使用圖標(biāo)進(jìn)行了增強。

<dx-form [formData]="employee">
<dxi-item dataField="name">
<div *dxTemplate="let data of 'label'">
<person-icon></person-icon> Name
</div>
...
</dxi-item>
</dx-form>

Accordion – 自定義標(biāo)題模板的個別項目

DevExtreme Accordion允許開發(fā)者為所有項目標(biāo)題指定一個共享的自定義模板，在某些情況下，您可能需要為每個項目使用不同的模板。在新版本中，開發(fā)者可以在項目級別上指定標(biāo)題模板。例如在下面的例子中，第一項有一個副標(biāo)題，當(dāng)然您可以在Accordion中添加按鈕、圖像或任何自定義內(nèi)容：

<dx-accordion>
<dxi-item>
<div *dxTemplate="let data of 'title'">
<h1>Super Mart of the West</h1>
<h2>Arkansas department</h2>
</div>
...
</dxi-item>
</dx-accordion>

編輯器 - 自定義驗證消息位置

 如果編輯器驗證失敗，則在編輯器下方顯示一條消息。用戶要求在這方面提供更大的靈活性，并允許控件在編輯器上方或左側(cè)/右側(cè)顯示驗證消息，官方將在下次主要更新中引入相應(yīng)的' validationMessagePosition '配置選項。

<dx-text-box validationMessagePosition="left|right|top|bottom">
<dx-validator>
<dxi-validation-rule
type="number"
message="Value must be a number"
></dxi-validation-rule>
</dx-validator>
</dx-text-box>

日歷 - 顯示周數(shù)

另一個要求很高的UI增強是在Calendar組件中顯示周數(shù)，開發(fā)者可以通過組件配置中的新“showWeekNumbers”選項激活此功能。

<dx-calendar
[showWeekNumbers]="true"
[(value)]="currentValue"
></dx-calendar>

復(fù)選框 - 由終端用戶設(shè)置不確定值

DevExtreme CheckBox支持不確定狀態(tài)，它是通過將組件值設(shè)置為null或undefined來啟用的。一旦終端用戶單擊復(fù)選框，就不可能回到不確定狀態(tài)。一些用戶要求引入一種方法，將值重置回不確定的狀態(tài)，為了實現(xiàn)這一點，新版本引入一個附加的價值變更模式。在這種模式下，每次點擊都會旋轉(zhuǎn)三個組件狀態(tài)——選中、未選中和不確定。

<dx-check-box
[valueChangeMode]= "default|includeIndeterminate"
[(value)]="value"
></dx-check-box>

工具欄 - 多線路自適應(yīng)模式

如果給定設(shè)備上沒有足夠的空間，工具欄可以自動隱藏下拉菜單中的項目，最終用戶可以打開此菜單來調(diào)用與隱藏項關(guān)聯(lián)的操作。在此模式下，通過換行到下一行，工具欄項仍然可見，因此最終用戶可以立即訪問所有可用的項目。

<dx-toolbar [multiline]="true">
</dx-toolbar>

數(shù)據(jù)透視網(wǎng)格導(dǎo)出到Excel - 導(dǎo)出字段面板標(biāo)題

DevExtreme PivotGrid允許開發(fā)者將其內(nèi)容導(dǎo)出到Microsoft Excel (v20.2+)，目前導(dǎo)出的數(shù)據(jù)只包括列/行維度值(類別)和交叉點的聚合值(數(shù)字)。為了幫助解決特定的用例，我們將更新導(dǎo)出引擎，以便您也可以包括維度(字段)名稱。

<dx-pivot-grid
[dataSource]="dataSource"
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[exportFieldHeaders] ="true"
></dxo-export>
</dx-pivot-grid>

API增強

彈出 - 隱藏/顯示API增強

開發(fā)這可能已經(jīng)在彈出窗口的onHiding/ ondisplays事件中使用了' cancel '標(biāo)志來中止操作(基于特定的條件)，有些人要求異步計算條件。例如，當(dāng)您必須等待最終用戶批準(zhǔn)/拒絕請求時，對于這種情況，我們的一些組件支持' Promise '類型的' cancel '標(biāo)志值，新版本以同樣的方式支持彈出窗口的onHiding/ ondisplays事件中的promise。

onHiding: (e) => {
e.cancel = showConfirmation("Are you sure?"); // returns a Promise
},

彈出窗口的show/hide方法返回一個Promise對象，該對象在操作完成后被解析。用戶要求在這方面有一些靈活性——特別是在事件處理程序通過' cancel '標(biāo)志取消操作時拒絕Promise。

try {
await popup.hide();
// closed successfully
}
catch (e) {
// closing was cancelled
}

TagBox - 提交自定義項目的額外事件

DevExtreme TagBox允許終端用戶添加自定義項目，一旦用戶輸入自定義文本并按Enter，新創(chuàng)建的項就會提交給數(shù)據(jù)源。為了加速數(shù)據(jù)輸入過程，用戶要求在TagBox失去焦點時(當(dāng)用戶按Tab鍵或單擊表單的提交/保存按鈕時)自動提交自定義項目，新版本擴展API來支持這些使用場景。

Slider & RangeSlider - 延遲' valueChanged '事件

當(dāng)終端用戶開始拖動Slider的句柄時，組件立即引發(fā)valueChanged事件。因此在用戶釋放句柄之前會引發(fā)一系列事件，新版本引入一個額外的模式，只在用戶交互結(jié)束時觸發(fā)一次valueChanged事件。

<dx-slider valueChangeMode="instant|eventual">
</dx-slider>