彩票走势图

界面控件DevExtreme使用指南 - 如何自定义项目外观

翻译|使用教程|编辑:龚雪|2023-05-04 10:49:00.840|阅读 41 次

概述:本文将为大家介绍界面控件DevExtreme的Accordion(折叠)组件中如何自定义项目外观,欢迎下载最新版体验~

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

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

DevExtreme v22.2正式版下载

DevExpress技术交流群7:674691612      欢迎一起进群讨论

对于Accordion面板的小定制,您可以在面板数据对象中定义特定字段。例如,下面的代码生成三个面板,第一个和第三个没有自定义,第二个是禁用的。

jQuery

JavaScript

var accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];

$(function () {
$("#accordionContainer").dxAccordion({
dataSource: accordionData
});
});

HTML

<div id="accordionContainer"></div>

Angular

HTML

<dx-accordion
[dataSource]="accordionData">
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion
:data-source="accordionData">
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion from "devextreme-vue/accordion";

export default {
components: {
DxAccordion
},
data() {
return {
accordionData: [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}]
};
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion } from 'devextreme-react/accordion';

const accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];

class App extends React.Component {
render() {
return (
<Accordion
dataSource={accordionData}
/>
);
}
}

export default App;

如果需要更灵活的解决方案,可以定义和i。在Angular和Vue中,您可以在标记中声明它,在React中,您可以使用呈现函数(如下面的代码所示)或组件:

Angular

HTML

<dx-accordion
[dataSource]="accordionData"
itemTitleTemplate="title"
itemTemplate="item">
<div *dxTemplate="let employee of 'title'">
<span>{{employee.firstName}} </span>
<span>{{employee.lastName}}</span>
</div>
<div *dxTemplate="let employee of 'item'">
<span>{{employee.birthDate}} </span>
<span>{{employee.position}}</span>
</div>
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion
:data-source="accordionData"
item-title-template="title"
item-template="item">
<template #title="{ data }">
<div>
<span>{{ data.firstName }} </span>
<span>{{ data.lastName }}</span>
</div>
</template>
<template #item="{ data }">
<div>
<span>{{ data.birthDate }} </span>
<span>{{ data.position }}</span>
</div>
</template>
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion from "devextreme-vue/accordion";

export default {
components: {
DxAccordion
},
data() {
return {
accordionData: [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];
};
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion } from 'devextreme-react/accordion';

const accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];

class App extends React.Component {
render() {
return (
<Accordion
dataSource={accordionData}
itemTitleRender={this.renderTitle}
itemRender={this.renderItem}
/>
);
}

renderTitle(data) {
return (
<div>
<span>{data.firstName} </span>
<span>{data.lastName}</span>
</div>
);
}

renderItem(data) {
return (
<div>
<span>{data.birthDate} </span>
<span>{data.position}</span>
</div>
);
}
}

export default App;

如果使用jQuery,请使用DOM操作方法来组合折叠项的HTML标记,要应用这个标记,使用itemTemplate和itemTitleTemplate回调函数,如下面的代码所示:

jQuery

JavaScript

var accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];

$(function () {
$("#accordionContainer").dxAccordion({
dataSource: accordionData,
itemTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<p>" + itemData.birthDate + " </p>");
itemElement.append("<p>" + itemData.position + "</p>");
},
itemTitleTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<span>" + itemData.firstName + " </span> ");
itemElement.append("<span>" + itemData.lastName + "</span>");
}
});
});

HTML

<div id="accordionContainer"></div>

您还可以自定义单个项,在Angular、Vue和React中,使用dxItem组件来声明它们。使用jQuery时,您可以将这些项声明为脚本,并在模板属性中引用它们,或者直接为该属性分配自定义函数。

Angular

HTML

<dx-accordion>
<dxi-item title="John Smith">
<span>Network Administrator</span>
</dxi-item>
<dxi-item title="Samantha Jones">
<span>Technical Writer</span>
</dxi-item>
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion>
<DxItem title="John Smith">
<template #default>
<div>Network Administrator</div>
</template>
</DxItem>
<DxItem title="Samantha Jones">
<template #default>
<div>Technical Writer</div>
</template>
</DxItem>
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion, { DxItem } from "devextreme-vue/accordion";

export default {
components: {
DxAccordion,
DxItem
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion, Item } from 'devextreme-react/accordion';

class App extends React.Component {
render() {
return (
<Accordion>
<Item title="John Smith">
<span>Network Administrator</span>
</Item>
<Item title="Samantha Jones">
<span>Technical Writer</span>
</Item>
</Accordion>
);
}
}

export default App;

jQuery

HTML

<div id="accordionContainer"></div>
<script id="individualTemplate" type="text/html">
<span>Technical Writer</span>
</script>

JavaScript

$(function() {
$("#accordionContainer").dxAccordion({
items: [{
title: "John Smith",
template: function() {
return $("<span>").text("Network Administrator");
}
}, {
title: "Samantha Jones",
template: $("#individualTemplate")
}]
});
});

此外,您可以使用第三方模板引擎来定制UI组件的外观。


DevExpress企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP