翻譯|使用教程|編輯:龔雪|2023-04-24 09:12:29.443|閱讀 167 次
概述:本文將為大家介紹界面控件DevExtreme的Accordion(折疊)組件入門指南,歡迎下載最新版體驗~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序,該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
請注意:在開始本教程之前,請確保DevExtreme已安裝在Angular、Vue、React或jQuery應用程序中。
DevExpress技術交流群7:674691612 歡迎一起進群討論
本教程展示如何將Accordion(折疊)添加到頁面并配置組件的核心設置,因此開發者將創建以下UI組件:
本教程中的每一節都描述了單個配置步驟,開發者也可以在以下GitHub存儲庫中找到完整的源代碼:。
在上文中(點擊這里回顧>>),我們為大家演示了如何創建一個折疊、以及如何將數據綁定到折疊中,本文將繼續講解如何創建更好的折疊功能。
如果不指定其他屬性,一次只能展開一個面板。若要更改此操作,請將 和 屬性設置為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;
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網