首页 > 其他分享 >界面控件DevExtreme UI组件——增强的自定义功能

界面控件DevExtreme UI组件——增强的自定义功能

时间:2023-06-15 09:57:51浏览次数:122  
标签:控件 自定义 React DevExtreme UI 组件 模板

在本文中,我们将回顾DevExtreme UI组件在v22.2版本主要更新中一系列与自定义相关的增强。

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

DevExtreme v22.2正式版下载

DevExpress技术交流群8:523159565      欢迎一起进群讨论

验证消息位置

用户可以使用新的validationMessagePosition选项来指定验证消息相对于编辑器输入位置的位置,该选项接受以下值:

  • 'bottom' (默认)
  • 'top'
  • 'left'
  • 'right'
界面控件DevExtreme UI组件——增强自定义(Angular,React,Vue,jQuery)

React

<TextBox validationMessagePosition="right">
<Validator>
<RequiredRule message="Address is required" />
</Validator>
</TextBox>
折叠 - 单个项目的标题模板

现在可以为单个项目定义Accordion标题模板(通过为每个项目使用titleTemplate 属性),在下面的图片中,第一项的标题使用了不同的样式:

界面控件DevExtreme UI组件——增强自定义(Angular,React,Vue,jQuery)

React

<Accordion ... >
<Item
titleRender={() => (<b>First item title</b>)}
>
Item content
</Item>
</Accordion>
复选框 - 循环通过三个状态

v22.2附带了一个额外的CheckBox 值更改模式。在这种模式下,每次点击循环通过三个组件状态:检查、未检查和不确定。

使用enableThreeStateBehavior选项来启用这个功能。

界面控件DevExtreme UI组件——增强自定义(Angular,React,Vue,jQuery)

Angular

<dx-check-box
[enableThreeStateBehavior]="true"
[value]="null"
></dx-check-box>
表单 - 自定义标签模板

之前Form组件只能显示文本标签,现在可以使用标签了。属性来定义自定义模板,并在编辑器的标签中显示图像或其他丰富内容。

界面控件DevExtreme UI组件——增强自定义(Angular,React,Vue,jQuery)

Vue

<DxForm ... >
<DxItem ... >
<DxLabel template="emailLabel"/>
</DxItem>
<template #emailLabel="{ data }">
<LabelTemplate
:data="data"
icon="email"
/>
</template>
</DxForm>
DateBox — 自定义Today按钮文本

用户现在可以更改 Today 按钮显示的文本(在'date'和'datetime'模式下),只需将带有自定义文本的字符串传递给todayButtonText 属性。

React

<DateBox
type="datetime"
todayButtonText="This very day"
/>
范围条形图 - 最小条形尺寸

如果范围条形图数据源中的最小值与最大值有很大差异,则使用小条形显示小值(使交互变得困难)。在这种情况下,您可以使用新的minBarSize 属性来指定以像素为单位的最小条大小。

界面控件DevExtreme UI组件——增强自定义(Angular,React,Vue,jQuery)
<dx-chart ... >
<dxo-common-series-settings ...
[minBarSize]="2"
></dxo-common-series-settings>
</dx-chart>

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

 

标签:控件,自定义,React,DevExtreme,UI,组件,模板
From: https://www.cnblogs.com/AABBbaby/p/17482021.html

相关文章

  • Three.js教程:相机控件轨道控制器OrbitControls
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生相机控件轨道控制器OrbitControls平时开发调试代码,或者展示模型的时候,可以通过相机控件OrbitControls实现旋转缩放预览效果。OrbitControls使用你可以打开课件案例源码测试下效果。旋转:拖动鼠标左键缩放......
  • Vue自定义校验
    age:[{required:true,message:'请输入年龄',trigger:'blur'},{validator:(rule,value,callback)=>{if(value>=18){callback();}else{callback(newError("教练年龄必须大于18周岁"));}}......
  • SpringBoot使用自定义的logback日志
    1.介绍描述:主要由三个模块构成logback-core:核心代码块(不介绍)logback-classic:实现了slf4j的api,加入该依赖可以实现log4j的api。logback-access:访问模块与servlet容器集成提供通过http来访问日志的功能(也就是说不需要访问服务器,直接在网页上就可以访问日志文件,实现HTTP访问......
  • SpringBoot使用自定义日志注解,配置切面
    1.使用技巧以下是需要注意的部分:在环绕通知中使用ProceedingJoinPoint,控制目标方法的运行。在其他通知类型中使用JoinPoint。如果使用JoinPoint则必须位于参数的第一位。ProceedingJoinPoint中有特殊的方法proceed()。当有多个切面时,使用@Order(11)来指定注解的优先级。......
  • 参数结合控件筛选显示数据
    SELECT*FROM销量where1=1${if(len(地区)==0,"","and地区='"+地区+"'")}where1=1是为了恒成立,避免后续语句出问题影响到前面控件名称为地区......
  • 自定义配置文件
       ......
  • iOS-自定义的画圆或弧的UIView
     iOS-自定义的画圆或弧的UIView CustomViewOfCircle.h#import<UIKit/UIKit.h>@interfaceCustomViewOfCircle:UIView{//是否自定义属性:myDotBOOLisDefinedMyDot;//是否自定义属性:myRadiusBOOLisDefinedMyRadius;//是否自定义属......
  • SpringBoot自定义线程池
    SpringBoot自定义线程池在SpringBoot中,可以使用@Configuration和@Bean去设置线程池,用@Value去做线程池的参数配置。线程池配置:importcom.google.common.util.concurrent.ThreadFactoryBuilder;importorg.springframework.beans.factory.annotation.Value;importor......
  • 【vue】前端下载文件自定义文件名称
    【vue】前端下载文件自定义文件名称https://blog.csdn.net/weixin_48200589/article/details/125067618下载文件自定义文件名称文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件2.正常我们的下载处理方式3.自定义下载的文件名字文件下载名称......
  • AntDesign自定义校验表单
    <a-rowclass="row":gutter="32"><a-col:span="16"><a-form-itemlabel="场景模板标签"name="tags"><a-......