界面控件DevExtreme使用指南 - 折叠组件快速入门（一）

慧都科技 06-02 156

前言：

现在姐妹们对“jquery图片折叠效果”可能比较讲究，你们都想要剖析一些“jquery图片折叠效果”的相关文章。那么小编同时在网上收集了一些有关“jquery图片折叠效果””的相关资讯，希望大家能喜欢，看官们一起来了解一下吧！

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

请注意：在开始本教程之前，请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。

DevExtreme Complete Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

Accordion UI组件包含几个面板，一个显示在另一个面板下面。

本教程展示如何将Accordion（折叠）添加到页面并配置组件的核心设置，因此开发者将创建以下UI组件：

本教程中的每一节都描述了单个配置步骤，开发者也可以在以下GitHub存储库中找到完整的源代码：getting-started-with-accordion。

创建一个Accordion（折叠）

jQuery

将DevExtreme添加到jQuery应用程序中，并使用以下代码创建Accordion:

index.js

$(function() {$("#accordion").dxAccordion({ });});

index.html

<html><head><!-- ... --><script type="text/javascript" src=";></script><link rel="stylesheet" href=";><script type="text/javascript" src=";></script><script type="text/javascript" src="index.js"></script></head><body><div id="accordion"></div></body></html>

Angular

将DevExtreme添加到你的Angular应用中，并使用以下代码创建一个Accordion：

app.component.html

<dx-accordion></dx-accordion>

app.component.ts

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { DxAccordionModule } from 'devextreme-angular';@NgModule({declarations: [AppComponent],imports: [BrowserModule,DxAccordionModule],providers: [ ],bootstrap: [AppComponent]})export class AppModule { }

Vue

将DevExtreme添加到您的Vue应用程序中，并使用以下代码创建Accordion：

App.vue

<template><DxAccordion /></template><script>import 'devextreme/dist/css/dx.light.css';import { DxAccordion } from 'devextreme-vue/accordion';export default {components: {DxAccordion}}</script>

React

将DevExtreme添加到React应用程序中，并使用以下代码创建Accordion：

App.js

import React from 'react';import 'devextreme/dist/css/dx.light.css';import { Accordion } from 'devextreme-react/accordion';function App() {return (<Accordion />);}export default App;

将Accordion（折叠）绑定到数据

开发者可以从数据源或项目数组中显示Accordion数据，注意每个数据源对象必须包含标题字段，其值指定面板的标题。