Dev·2022年终活动火热开启,欢迎抢购

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:18100878085

B/S端界面控件DevExtreme中文使用指南——基于HTML的组件自定义

来源:   发布时间:2022-11-24   浏览:75次

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

本文介绍自定义基于HTML的UI组件的方法。

DevExtreme v22.1正式版下载

组件的API

官方建议使用UI组件的API来自定义它,与CSS类不同,API很少被更改。如果发生更改,UI组件将用警告填充浏览器控制台,帮助开发人员修复代码。

每个UI组件都有一个在UI组件的API参考部分中描述的API,例如开发人员可以通过相应的属性指定UI组件的宽度。在下面的例子中,这个属性是为List UI组件设置的。

jQuery

JavaScript

$(function() {
$("#listContainer").dxList({
width: 600
});
});

ASP.NET MVC控件

Razor C#

@(Html.DevExtreme().List()
.Width(600)
)

如果页面包含同一个UI组件的多个实例,开发人员可以使用defaultOptions(rule) 方法在一个地方为所有这些组件指定默认配置,相同的方法允许开发者为不同的设备指定不同的默认配置。

此外,UI组件提供了可以用于更深入自定义的模板。

单个CSS类

由于DevExtreme组件包含标准的HTML元素(<div>, <td>, <tr>等),所以开发人员可以使用CSS来自定义它们。

文档中记录了许多类,但是在大多数情况下,开发人员需要检查HTML标记来确定和覆盖应用的CSS类。

可以像往常一样使用class属性将类添加到标记中的UI组件元素中,如果不可能更改标记,则使用UI组件的elementAttr属性来实现相同的目的。

注意:CSS内部结构可能在不同版本之间更改而不另行通知。考虑到这一点,我们建议在可能的情况下使用它们的API替代CSS来自定义UI组件。因为如果API发生了更改,开发人员将收到通知。

在自定义过程中,建议通过响应式设计模式查看UI组件页面再不同设备上的外观。


DevExpress技术交流群6:600715373      欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取

慧都2022年终促销火热开启,欢迎选购
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/3436.html

相关产品: DevExtreme跨平台开发框架,


联系我们
  • 重庆总部
  • 18100878085
  • 18100878085
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
微信
QQ 电话
023-68661681
返回
顶部