DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

請注意：在開始本教程之前，請確保DevExtreme已安裝在Angular、Vue、React或jQuery應用程序中。

DevExtreme v22.2正式版下載

DevExpress技術交流群7：674691612      歡迎一起進群討論

本教程展示如何將Accordion（折疊）添加到頁面并配置組件的核心設置，因此開發者將創建以下UI組件：

本教程中的每一節都描述了單個配置步驟，開發者也可以在以下GitHub存儲庫中找到完整的源代碼：。

在上文中（點擊這里回顧>>），我們為大家演示了如何創建一個折疊、以及如何將數據綁定到折疊中，本文將繼續講解如何創建更好的折疊功能。

控制Accordion（折疊）操作

如果不指定其他屬性，一次只能展開一個面板。若要更改此操作，請將 和 屬性設置為true，也可以使用屬性來改變面板展開和折疊動畫的持續時間。

jQuery

index.js

$(function() {
$("#accordion").dxAccordion({
// ...
collapsible: true,
multiple: true,
animationDuration: 450
});
});

Angular

app.component.html

<dx-accordion ...
[collapsible]="true"
[multiple]="true"
[animationDuration]="450"
>
</dx-accordion>

Vue

App.vue

<template>
<DxAccordion ...
:collapsible="true"
:multiple="true"
:animation-duration="450"
/>
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
return (
<Accordion ...
collapsible={true}
multiple={true}
animationDuration="450"
/>
);
}

export default App;

自定義項目外觀

要自定義面板外觀，請使用作為面板內容，使用作為面板標題。

jQuery

index.js

$(function() {
$("#accordion").dxAccordion({
// ...
itemTitleTemplate: function (data) {
return data.FirstName + " " + data.LastName;
},
itemTemplate: function (data) {
return data.Position + " from " + data.State;
}
});
});

Angular

app.component.html

<dx-accordion ...
itemTemplate="item"
itemTitleTemplate="title"
>
<div *dxTemplate="let data of 'title'">
{{ data.FirstName + " " + data.LastName }}
</div>
<div *dxTemplate="let data of 'item'">
{{ data.Position + " from " + data.State }}
</div>

</dx-accordion>

Vue

App.vue

<template>
<DxAccordion ...
item-template="item"
item-title-template="title"
>
<template #title="{ data }">
{{ data.FirstName + " " + data.LastName }}
</template>
<template #item="{ data }">
{{ data.Position + " from " + data.State }}
</template>
</DxAccordion>
</template>

<script>
// ...
</script>

React

App.js

// ...
const customTitle = (data) => {
return data.FirstName + " " + data.LastName;
}
const customItem = (data) => {
return data.Position + " from " + data.State;
}

function App() {
return (
<Accordion ...
itemTitleRender={customTitle}
itemRender={customItem}
/>
);
}

export default App;