配置

立即下載DevExtreme

定義Accordion UI組件配置屬性的對象。

accessKey

指定將焦點設置在UI組件上的快捷鍵。

• Type：
• Default Value：undefined

該屬性的值將傳遞給UI組件底層的HTML元素的accesskey屬性。

activeStateEnabled

指定UI組件是否因用戶交互而改變其可視化狀態。

• Type：
• Default Value：false

 當用戶按下鼠標的主要按鈕時，UI組件切換到活動狀態。當此屬性設置為true時，應用活動狀態的CSS規則，您可以更改這些規則來定制組件。

當您在平臺上顯示組件時，如果該平臺的指導方針包含UI組件的活動狀態更改，則使用此屬性。

animationDuration

一個數字，指定在面板展開或折疊的動畫上花費的時間(以毫秒為單位)。

• Type：

• Default Value：300，200(材質)

collapsible

指定是否可以折疊所有項，或者是否必須始終展開至少一個項。

• Type：
• Default Value：false

dataSource

將UI組件綁定到數據。

• Type：String | < | dxAccordionItem | any> | Store | DataSource | DataSource Configuration | null
• Default Value：null

Accordion用于字符串值或對象的集合。

 根據您的數據源，將Accordion綁定到數據，如下所示。如果數據源提供對象，也要指定itemTemplate，如果對象包含items部分中描述的字段，則可以跳過此部分。

• Data Array ——將數組分配給dataSource選項。
• Read-Only Data in JSON Format——將dataSource屬性設置為返回JSON數據的JSON文件或服務的URL。
• OData——實現ODataStore。
• Web API, PHP, MongoDB——使用以下擴展之一，使服務器能夠根據DevExtreme UI組件使用的協議處理數據：

 然后，使用方法在客戶機上配置對服務器的訪問，如下所示，這個方法是DevExtreme.AspNet.Data的一部分。

$(function() {
let serviceUrl = "http://url/to/my/service";
$("#accordionContainer").dxAccordion({
// ...
dataSource: DevExpress.data.AspNet.createStore({
key: "ID",
loadUrl: serviceUrl + "/GetAction",
insertUrl: serviceUrl + "/InsertAction",
updateUrl: serviceUrl + "/UpdateAction",
deleteUrl: serviceUrl + "/DeleteAction"
})
})
});

• Any other data source——實現一個CustomStore。

 不管輸入上的數據源是什么，Accordion總是將其包裝在DataSource對象中，此對象允許您對數據進行排序、篩選、分組和執行其他數據整形操作。要獲取它的實例，請調用getDataSource()方法。

查看以下關于數據綁定的注意事項：

• 如果指定了數據源，則不要指定items屬性，反之亦然。
• 數據字段名不能等于此值，且不能包含。、:、[、]等字符。
• 存儲和數據源具有處理和更新數據的方法，但是，這些方法不允許執行特定的任務(例如，替換整個數據集，在運行時重新配置數據訪問)。對于這樣的任務，創建一個新的數組、存儲或DataSource，并將其分配給DataSource屬性，就像在jQuery、Angular、React和Vue中更改屬性的文章中所示。

deferRendering

指定在顯示面板時是否呈現面板的內容，如果為false，則立即呈現內容。

• Type：
• Default Value： true

disabled

指定UI組件是否響應用戶交互。

• Type：
• Default Value：false

elementAttr

指定要附加到UI組件的容器元素的全局屬性。

• Type：
• Default Value： {}

$(function(){
$("#accordionContainer").dxAccordion({
// ...
elementAttr: {
id: "elementId",
class: "class-name"
}
});
});

focusStateEnabled

指定UI組件是否可以集中使用鍵盤導航。

• Type：
• Default Valu： true (desktop)

height

指定UI組件的高度。

• Type： | |
• Default Valu： | String
• UI組件的高度。
• Default Value：undefined

此屬性接受以下類型之一的值：

• Number——以像素為單位的高度。
• String——css接受的高度度量，例如：55px, 20vh, 80%， inherit。
• Function (deprecated since v21.2)——有關如何遷移到視口單元的信息，請參閱W0017警告描述。

hint

指定當用戶在UI組件上暫停時出現的提示文本。

Type：
Default Value：undefined

hoverStateEnabled

指定當用戶在UI組件上暫停時，UI組件是否改變其狀態。

Type：

Default Valu： true (desktop)

itemComponent

在React中指定的itemTemplate屬性的別名，接受自定義組件。

itemHoldTimeout

觸發onItemHold事件之前的時間周期(以毫秒為單位)。

• Type：
• Default Value：750

itemRender

在React中指定的itemTemplate屬性的別名，接受呈現函數。

items[]

UI組件顯示的項數組。

• Type： < | dxAccordionItem | any>
• Raised Events： optionChanged

items數組可以包含：

• 字符串
• 具有本節中描述的字段的對象
• 對象與任何其他字段。在本例中，指定 itemTemplate。

如果您需要更新UI組件項，重新分配整個項數組，如下例所示：

accordionInstance.option('items', newItems);

 作為項的替代方案，您可以使用dataSource屬性，它接受DataSource對象，該對象的底層存儲提供了一個API，允許更新單個項，而無需重新分配整個項集合。

提示：如果使用dataSource，則不要使用items屬性，反之亦然。

itemTemplate

為項指定自定義模板。

• Type：
• Template Data：
• 當前項的數據。
• Default Name： 'item'

itemTitleComponent

在React中指定的itemTitleTemplate屬性的別名，接受自定義組件。

itemTitleRender

在React中指定的itemTitleTemplate屬性的別名，接受呈現函數。

itemTitleTemplate

指定項目標題的自定義模板。

• Type：
• Template Data：
• 當前項的數據。
• Default Name： 'item'

keyExpr

指定key屬性，該屬性提供用于訪問數據項的鍵值，每個鍵值必須是唯一的。

Type |

Default Value：null

multiple

指定UI組件是一次可以展開多個項還是只能展開單個項。

• Type：
• Default Value：false

noDataText

指定在項集合為空時UI組件顯示的文本或HTML標記。

• Type：
• Default Value：'No data to display'

 Accordion組件計算noDataText屬性的值，然而，這種評估使得Accordion可能容易受到XSS攻擊。為了防止這些攻擊，請在將HTML標記分配給noDataText屬性之前對其進行編碼。

onContentReady

一個在UI組件被渲染和每次重新繪制組件時執行的函數。

• Type：
• Function parameters：
• e： ContentReadyEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onDisposing

在UI組件被處理之前執行的函數。

• Type：
• Function parameters：
• e： DisposingEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onInitialized

JavaScript框架中用于保存UI組件實例的函數。

• Type：
• Function parameters：
• e：InitializedEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onItemClick

當單擊或輕擊集合項時執行的函數。

• Type：
• Function parameters：
• e：ItemClickEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onItemContextMenu

當右鍵單擊或按下集合項時執行的函數。

• Type：
• Function parameters：
• e： ItemContextMenuEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onItemHold

當一個集合項被持有一段指定時間后執行的函數。

• Type：
• Function parameters：
• e： ItemHoldEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onItemRendered

呈現集合項后執行的函數。

• Type：
• Function parameters：
• e： ItemRenderedEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onItemTitleClick

當單擊或輕擊accordion項目的標題時執行的函數。

• Type：
• Function parameters：
• e： ItemTitleClickEvent
• 關于事件的信息。

目標結構：

• Default Value： null

onOptionChanged

在UI組件屬性被更改后執行的函數。

• Type：
• Function parameters：
• e：OptionChangedEvent
• 關于事件的信息。

目標結構：

• Default Value： null

下面的示例展示了如何訂閱組件屬性更改：

$(function() {
$("#accordionContainer").dxAccordion({
// ...
onOptionChanged: function(e) {
if(e.name === "changedProperty") {
// handle the property change here
}
}
});
});

onSelectionChanged

當選擇或取消一個集合項時執行的函數。

• Type：
• Function parameters：
• e： SelectionChangedEvent
• 關于事件的信息。

目標結構：

• Default Value： null

repaintChangesOnly

指定是否僅重新繪制數據已更改的元素。

• Type：
• Default Value：false

rtlEnabled

將UI組件切換為從右向左表示。

• Type：
• Default Value：false

 當此屬性設置為true時，UI組件文本將從右向左流動，元素的布局將相反。要將整個應用程序/站點切換為從右到左的表示，請將傳遞給DevExpress.config(config)方法的對象的rtlEnabled字段賦值為true。

DevExpress.config({
rtlEnabled: true
});

selectedIndex

當前展開項的索引號。

• Type：

• Default Value：0
• Raised Events：selectionChanged
  selectedItem

selectedItem

展開的項對象。

• Type： any
• Default Value： null
• Raised Events： selectionChanged

selectedItemKeys

指定當前展開的項鍵的數組。

• Type：<any>
• Raised Events：selectionChanged

selectedItems

當前展開的項對象的數組。

• Type：<any>
• Raised Events：selectionChanged

tabIndex

指定使用Tab鍵進行導航時元素的編號。

• Type：

• Default Value：0

該屬性的值將傳遞給UI組件底層的HTML元素的 tabindex屬性。

visible

指定UI組件是否可見。

• Type：
• Default Value：true

width

指定UI組件的寬度。

• Type： | |
• Return Value： |
• UI組件的寬度。
• Default Value：undefined

此屬性接受以下類型之一的值：

• Number——以像素為單位的寬度。
• String——CSS接受的寬度度量，例如“55 px”、“20大眾”、“80%”、“汽車”、“繼承”。
• Function (deprecated since v21.2)——有關如何遷移到視口單元的信息，請參閱W0017警告描述。