界面控件DevExtreme使用指南 |
您所在的位置：网站首页 › c的web开发框架 › 界面控件DevExtreme使用指南 |
界面控件DevExtreme使用指南
|
界面控件DevExtreme使用指南 - Accordion（折叠）组件快速入门（一）
来源： 发布时间：2023-04-13 浏览：69次 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组件包含几个面板，一个显示在另一个面板下面。 本教程展示如何将Accordion（折叠）添加到页面并配置组件的核心设置，因此开发者将创建以下UI组件： 
本教程中的每一节都描述了单个配置步骤，开发者也可以在以下GitHub存储库中找到完整的源代码：getting-started-with-accordion。 创建一个Accordion（折叠）jQuery 将DevExtreme添加到jQuery应用程序中，并使用以下代码创建Accordion: index.js $(function() { $("#accordion").dxAccordion({ }); });index.html Angular 将DevExtreme添加到你的Angular应用中，并使用以下代码创建一个Accordion： app.component.html 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 import 'devextreme/dist/css/dx.light.css'; import { DxAccordion } from 'devextreme-vue/accordion'; export default { components: { DxAccordion } }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 ( ); } export default App; 将Accordion（折叠）绑定到数据开发者可以从数据源或项目数组中显示Accordion数据，注意每个数据源对象必须包含标题字段，其值指定面板的标题。 jQuery index.js $(function() { $("#accordion").dxAccordion({ dataSource: employees }); });index.html data.js const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];Angular app.component.html app.component.ts import { Component } from '@angular/core'; import { Employee, Service } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], }) export class AppComponent { employees: Employee[]; constructor(private service: Service) { this.employees = service.getEmployees(); } } app.service.ts import { Injectable } from '@angular/core'; export class Employee { ID: number | undefined; FirstName: string | undefined; LastName: string | undefined; Prefix: string | undefined; Position: string | undefined; BirthDate: string | undefined; State: string | undefined; } const employees: Employee[] = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }]; @Injectable() export class Service { getEmployees() { return employees; } }Vue App.vue // ... import { employees } from './data'; export default { components: { DxAccordion }, data() { return { employees } } } data.js export const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];React App.js // ... import { employees } from './data'; function App() { return ( ); } export default App;data.js export const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];更多DevExpress线上公开课、中文教程资讯请上中文网获取 
本站文章除注明转载外，均为本站原创或翻译
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址：https://www.devexpresscn.com/post/3716.html
相关产品： DevExtreme跨平台开发框架, 上一篇： DevExpress XAF示例：如何实现自定义权限、角色和用户对象 下一篇： DevExpress WPF示例：MVVM框架 - 使用ViewModelBase类继承视图模型 |
【本文地址】
今日新闻 |
推荐新闻 |