界面组件DevExtreme v23.2新功能预览 - 增强Material主题功能

news2024/11/19 4:40:08

界面组件DevExtreme v23.2即将在几个月之后交付,本文将带大家预览一波新功能。

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

获取DevExtreme v23.1正式版下载(Q技术交流:909157416)

安装

要开始使用DevExtreme EAP构建,只需安装带有23.2-next标签的目标框架相关的NPM包,使用下面当中的一个命令继续:

npm install devextreme@23.2-next --save-exact

npm install devextreme-angular@23.2-next --save-exact // Angular installation

npm install devextreme-react@23.2-next --save-exact // React installation

npm install devextreme-vue@23.2-next --save-exact // Vue installation

Calendar — 离散日多选择

使用新的selectionMode选项,您现在有三种不同的模式可供选择:单个、多个或范围选择。在单模式下,用户可以选择一个日期,而在多模式下,用户可以选择多个日期,范围模式允许用户选择给定范围的第一个和最后一个日期。

DevExtreme v23.2产品图集

官方还扩展了value选项,允许您不仅可以设置单个日期作为初始值,还可以设置日期数组。为了简化calendar导航,还引入了一个electweekonclick选项,允许用户通过单击周数来选择整个一周。

Tab/TabPanel — 垂直方向和图标位置

这个EAP包括多个新的与Tab/TabPanel相关的功能。

对于Tab,我们添加了一个新的方向选项,允许您水平或垂直排列选项卡。

对于TabPanel,新tabsPosition选项允许您在面板的右侧、左侧、顶部和底部对齐选项卡。

DevExtreme v23.2产品图集

Tabs 和 TabPanel现在都包含一个图标位置选项,允许您定义图标在选项卡中的显示位置(开始,结束,顶部或底部位置)。

DevExtreme v23.2产品图集

表单/编辑器 — 更改检测(Dirty状态)

该EAP包括增强的编辑器和表单功能。

首先,官方将重置方法重命名为clear(为了跨组件的一致性)。为了维护重置功能,官方为编辑器引入了一种新的重置方法,允许您将值恢复到初始状态。

类似地,官方还重命名(并弃用)了Form的resetValues方法,并引入了clear方法。为了维护整个表单的重置功能,引入了一个新的重置方法。

新版本还将介绍isDirty标志,它现在对编辑器和表单都可用。isDirty标志有助于确定表单项或编辑器是否发生了更改,它允许您在表单保持不变时禁用重置按钮,从而消除不必要的操作。当用户意外关闭表单时,也可以使用isDirty。在这种情况下,您可以提示用户仅在进行修改时保存更改。

DevExtreme v23.2产品图集

Form(表单) — 支持DateRangeBox

您现在可以使用editorType: 'dxDateRangeBox'将DateRangeBox组件添加到表单中。

DevExtreme v23.2产品图集

<dxi-item
dataField="VacationDates"
editorType="dxDateRangeBox"
[editorOptions]="dateRangeBoxOptions"
>
</dxi-item>
增强Material主题功能

该EAP包括DevExtreme Material主题的以下更改:

  • 为了解决与可访问性相关的问题,Button组件的禁用状态现在包含更高对比度的颜色组合。

DevExtreme v23.2产品图集

  • 官方更新了ButtonGroup组件的外观,以确保与Google的Material设计指南保持一致。

DevExtreme v23.2产品图集

  • 不同的文本编辑器(类型)框现在是相同的高度,由于颜色组合的对比度更高,标签和占位符元素的内容也更容易访问。

DevExtreme v23.2产品图集

  • DevExtreme Accordion组件中引入了多个更改,标题中的文本和图标现在对齐了。旋转图标使用了对比度更高的颜色组合,组件的整体风格更符合Google的Material设计指南。

DevExtreme v23.2产品图集

可访问性

官方将继续在DevExtreme产品线中增强可访问性支持,该EAP包括针对DevExpress数据网格的与对比度相关的增强。

DevExtreme v23.2产品图集

使用WCAG和Section 508标准,官方还改善了使用屏幕阅读器的个人阅读体验。像读取验证消息这样的增强功能现在可以在各种组件中使用,比如DevExtreme DataGrid、HtmlEditor、DropDownBox、NumberBox和DateBox。

注意:为了帮助隔离/解决与可访问性相关的问题,官方使用了多种工具,包括aXe、Lighthouse和WAVE。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1081876.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IOday3作业

#include <head.h> int get_filePerrmison(mode_t mode)//获取文件权限 {char per[] "rwx";for(int i0;i<9;i){if((mode&(0400>>i))0){putchar(-);continue;}putchar(per[i%3]);}} int get_fileType(mode_t m) //获取文件类型 {switch(m&S_IF…

蓝桥杯每日一题2023.10.11

子串分值和 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 以下为50分方法&#xff08;暴力枚举&#xff09; 第一层循环枚举其长度&#xff0c;第二层循环枚举其左端点&#xff0c;k代表右端点&#xff0c;&#xff08;将每一种子串一一枚举出来&#xff09;算出从左端点到右…

关于Vuex的基础使用存值及异步

目录 一.概述 二.取值 2.1.安装 2.2.菜单栏 2.3.模块 2.4.引用 三.改值 四.异步&后台请求 好啦今天就到这里了希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.概述 Vuex 是一个用于 Vue.js 应用程序的状态管理库。它主要用于集中管理应用程序中的共享状态&a…

kafka详解(三)

2.2 Kafka命令行操作 2.2.1 主题命令行操作 1&#xff09;查看操作主题命令参数 [aahadoop102 kafka]$ bin/kafka-topics.sh2&#xff09;查看当前服务器中的所有topic (配置了环境变量不需要写bin/) [aahadoop102 kafka]$ bin/kafka-topics.sh --bootstrap-server hadoop10…

vue3组件的通信方式

一、vue3组件通信方式 通信仓库地址:vue3_communication: 当前仓库为贾成豪老师使用组件通信案例 不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。 比如:vue2组件通信方式 props:可以实现父子组件、子父组件、甚至兄弟组件通信 自定义事件:可…

【visionOS】从零开始创建第一个visionOS程序

前言&#xff1a;本來是看BonjourWeb的&#xff0c;但不自觉被apple visionOS吸引&#xff0c;因为这个概念的产品真的太前沿新颖了。 说不定到时候我会冲一冲~~~先简单学习下嘿嘿 为Apple Vision Pro创建一个新的应用程序和游戏世界。 介绍visionOS visionOS是苹果Vision Pr…

Linux基本指令(1)

Linux基本指令&#xff08;1&#xff09; 1.ls指令1.1ls的用法 2. pwd指令3.cd指令3.1 cd3.2补充内容3.3 cd - 指令3.4 cd ~ 指令 4. touch指令4.1stat指令 5.mkdir 指令6.rmdir/rm指令6.1补充内容 7.man指令8.nano 指令9.cat指令10 cp指令11 mv指令12 echo指令12.1 > 输出重…

二叉搜索树--验证二叉搜索树

验证二叉搜索树-力扣 98 题 解题思路&#xff1a;利用二叉树中序遍历的特性&#xff1a;遍历出来的结果是升序的即符合二叉搜索树 对于二叉树中序遍历不是太理解的&#xff0c;作者推荐的小白书&#xff1a;二叉树的初步认识_加瓦不加班的博客-CSDN博客 中序非递归实现 // 解…

抖音小店创业攻略,快速了解这些适合新手经营的类目

抖音小店是抖音平台上的一种新型电商形态&#xff0c;它允许用户在抖音上开设自己的小店&#xff0c;销售自己的商品。抖音小店的开设门槛低&#xff0c;成本也不高&#xff0c;因此很受新手创业者的青睐。那么&#xff0c;下面不若与众将介绍抖音小店中有哪些适合新手创业者经…

卫星影像-航拍影像-数据叠加到AutoCAD

卫星影像-航拍影像-数据叠加到AutoCAD 发布时间&#xff1a;2018-01-17 版权&#xff1a; 同步视频教程&#xff1a;卫星地图_高清卫星地图_卫星地图视频_卫星图像应用到AutoCAD工程设计&#xff08;套合、叠加、配准&#xff09; 视频教程&#xff1a;如何选择中央子午线或者…

.NET 8 中的调试增强功能

作者&#xff1a;James Newton-King 排版&#xff1a;Alan Wang 开发人员喜欢 .NET 强大且用户友好的调试体验。您可以在您选择的 IDE 中设置断点&#xff0c;启动已经附加上调试器的程序&#xff0c;逐步执行代码并查看 .NET 应用程序的状态。 在 .NET 8 中&#xff0c;我们致…

cdsn目录处理:```,```# 目录校正

原标题 <small> cdsn目录处理&#xff1a; &#xff0c;中间添加 # 空格 空行后 遇到的底部空行出错&#xff0c;书接上回&#xff0c;处理空行【python查找替换&#xff1a;查找空行&#xff0c;空行前后添加&#xff0c;中间添加 # 空格 空行后遇到的第1行文字&am…

React 组件传 children 的各种方案

自定义组件的时候往往需要传 children&#xff0c;由于写法比较多样&#xff0c;我就总结了一下。 方案列表 1. 类组件1.1 类组件&#xff0c;不使用解构1.2 类组件&#xff0c;使用解构 2. 函数组件2.1 函数组件&#xff0c;不使用解构2.2 函数组件&#xff0c;外部解构2.3 函…

根据前序遍历结果构造二叉搜索树

根据前序遍历结果构造二叉搜索树-力扣 1008 题 题目说明&#xff1a; 1.preorder 长度>1 2.preorder 没有重复值 直接插入 解题思路&#xff1a; 数组索引[0]的位置为根节点&#xff0c;与根节点开始比较&#xff0c;比根节点小的就往左边插&#xff0c;比根节点大的就往右…

WPF 窗口白屏问题分析与初步解决

环境描述 开发环境&#xff1a; Windows 11 Visual Studio 2022 .NET Framework 4.8 目标电脑环境 Windows10 默认包含了 .NET Framework 4.8 现象 编译好的WPF应用程序&#xff0c;是基于 .NET Framework 4.8开发的&#xff0c;在大部分电脑上可以正常使用。在某个客…

Python算法练习 10.11

leetcode 394 字符串解码 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效的&#xff1b;输入字符串中没…

湖南首个,万应低代码软件技术专业校企共建基地落成!

导语 9月开学季&#xff0c;湖南省民族职业学院教育技术学院迎来了近5000名新生&#xff0c;而其中软件技术专业的205名新生尤为引人注目——他们是这个校企共建专业的第一批学生&#xff0c;也是学院软件技术专业新型校企合作的第一批受益者。 湖南首个 万应低代码软件技术…

10_11C++

思维导图 #include <iostream>using namespace std; class Person { private:string name; protected:int age; public:char sex; public:Person() {cout << "父类无参构造函数" << endl;}Person(string n,int a,char s):name(n),age(a),sex(s){co…

[译]Sentry:如何从数据存储中获得更强的一致性

翻译自&#xff1a;How to Get Stronger Consistency Out of a Datastore 地址&#xff1a;https://blog.sentry.io/2019/09/17/how-to-get-stronger-consistency-out-of-a-datastore Sentry的首要工作是接收、解析用户的异常信息。当用户异常信息大量上报时&#xff0c;Sentry…

Linux部署kubeedge 1.4

文章目录 一、机器信息二、环境准备&#xff08;所有节点操作&#xff09;2.1. 修改主机名2.2. 开启路由转发2.3.安装Docker&#xff08;所有节点&#xff09;2.4.部署K8S集群(单机版&#xff0c;云端节点) 2.5.安装Mosquitto&#xff08;只在边缘节点安装)三、安装kubeedge 1.…