DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

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

DevExtreme v22.2正式版下載

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

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

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

在上文中（點擊這里回顧>>），我們?yōu)榇蠹已菔玖巳绾蝿?chuàng)建一個折疊、以及如何將數(shù)據(jù)綁定到折疊中，本文將繼續(xù)講解如何創(chuàng)建更好的折疊功能。

控制Accordion（折疊）操作

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

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;

自定義項目外觀

要自定義面板外觀，請使用作為面板內(nèi)容，使用作為面板標題。

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;