DevExtreme Angular - Overview
The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this widget very useful for presenting information in a limited amount of space.
The following code adds a simple Accordion to your page. Note that each data source object contains the title field, whose value goes to the title of the panel.
jQuery
JavaScript
HTML
var accordionData = [{ title: "Personal Data", firstName: "John", lastName: "Smith", birthYear: 1986 }, { title: "Contacts", phone: "(555)555-5555", email: "John.Smith@example.com" }, { title: "Address", state: "CA", city: "San Francisco", street: "Stanford Ave" }]; $(function () { $("#accordionContainer").dxAccordion({ dataSource: accordionData, itemTemplate: function (itemData, itemIndex, itemElement) { for (var field in itemData) { itemElement.append("<p>" + field + ": " + itemData[field] + "</p>"); } } }); });
<div id="accordionContainer"></div>
Angular
HTML
TypeScript
<dx-accordion [dataSource]="accordionData" itemTemplate="item"> <div *dxTemplate="let itemData of 'item'"> <p *ngFor="let key of getItemKeys(itemData)"> {{key}}: {{itemData[key]}} </p> </div> </dx-accordion>
import { DxAccordionModule } from "devextreme-angular"; // ... export class AppComponent { accordionData = [{ title: "Personal Data", firstName: "John", lastName: "Smith", birthYear: 1986 }, { title: "Contacts", phone: "(555)555-5555", email: "John.Smith@example.com" }, { title: "Address", state: "CA", city: "San Francisco", street: "Stanford Ave" }]; getItemKeys (item) { return Object.keys(item); } } @NgModule({ imports: [ // ... DxAccordionModule ], // ... })
Vue
App.vue
<template> <DxAccordion :data-source="accordionData" item-template="item"> <template #item="{ data }"> <div> <p v-for="key in getItemKeys(data)"> {{key}}: {{data[key]}} </p> </div> </template> </DxAccordion> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxAccordion from "devextreme-vue/accordion"; export default { components: { DxAccordion }, data() { return { accordionData: [{ title: "Personal Data", firstName: "John", lastName: "Smith", birthYear: 1986 }, { title: "Contacts", phone: "(555)555-5555", email: "John.Smith@example.com" }, { title: "Address", state: "CA", city: "San Francisco", street: "Stanford Ave" }] }; }, methods: { getItemKeys: function(item) { return Object.keys(item); } } }; </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Accordion } from 'devextreme-react/accordion'; const accordionData = [{ title: "Personal Data", firstName: "John", lastName: "Smith", birthYear: 1986 }, { title: "Contacts", phone: "(555)555-5555", email: "John.Smith@example.com" }, { title: "Address", state: "CA", city: "San Francisco", street: "Stanford Ave" }]; class App extends React.Component { render() { return ( <Accordion dataSource={accordionData} itemRender={this.renderItem} /> ); } renderItem(itemData) { return ( <div> { Object.keys(itemData).map(key => { return ( <p key={key}> {key}: {itemData[key]} </p> )} ) } </div> ); } } export default App;
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Accordion - Customize Item Appearance
- Accordion - Control the Behavior
- Accordion API Reference
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.