什么是新的R1 2020

jQuery R1 2020更新

新组件:Breadcrumb

jQuery Breadcrumb组件的新Kendo UI为开发人员提供了一个简单直观的界面，用于在不同层次的导航中移动。面包屑通常是文档页面中的重磅炸弹，几乎可以在任何网站中使用，以帮助用户在网页层次结构中导航。

新组件:徽章

由于移动设备上的图标表示未读消息或通知而流行起来，徽章组件在一般的网络世界中有几种用法。使用新的剑道UI Badge小部件，开发人员可以将徽章添加到现有的剑道UI组件、他们自己的UI元素中，甚至可以单独显示徽章，为页面上的某些内容提供一些额外的上下文信息。

新组件:文件管理器

作为多年来最受欢迎的组件之一，新的Kendo UI文件管理器组件允许最终用户浏览文件夹和文件，类似于Windows资源管理器中的功能，以帮助管理web应用程序中的文件存储。它可以与诸如Editor之类的组件一起使用来选择图像，也可以作为独立组件来帮助用户上传、下载和组织文件或文件夹。

复选框和单选按钮更新

虽然我们已经为复选框和单选按钮提供样式很长一段时间了，但我们的方法有点固执己见，而且不够灵活。这主要是因为需要在旧的浏览器中支持样式并确保跨浏览器的兼容性。然而，从那时起，这些老浏览器中的许多已经逐步停止使用。因此，在R1 2020中，我们决定重新评估这两个输入元素的样式，现在引入了一种更现代的方法来对这些组件进行样式设计。

网格改进:列虚拟化

jQuery Grid的Kendo UI的新列虚拟化特性让用户可以平滑地滚动包含许多列的数据集，而不会像以前那样因为呈现大量额外的HTML而对性能造成影响。由于回收了HTML元素和网格单元格，用户现在可以在整个列集合中水平滚动，而不会出现任何性能问题。

树列表改进:搜索面板

剑道UI树列表中的新搜索面板功能为用户提供了一种快速的方法，可以在树列表的顶部工具栏中输入单个文本来过滤树列表的内容。如何过滤，以及数据中的哪些字段最终成为过滤器，都可以通过一组快速配置选项进行配置——确保任何搜索都符合用户的需求。

编辑器改进:合并表工具

由于Kendo UI编辑器的新合并表工具，最终用户可以轻松地创建和更新编辑器内容中任何表元素的布局。这允许进行交互，例如合并行中相邻的两个单元格，甚至合并列中的单元格—所有这些都可以通过单个工具栏界面完成。

编辑器改进:格式画家工具

Format Painter是许多富文本编辑器中的标准工具。该功能允许用户选择文本的一部分来复制格式(字体、大小、颜色等)，并将其应用于内容中的另一部分。在R1 2020中，jQuery编辑器的剑道UI现在已经在其默认工具选项集合中内置了对该功能的支持。

调度器改进:自动调整事件大小

Kendo UI Scheduler中新的自动调整事件大小的功能允许在不同的事件和日期中显示不同的高度。这意味着具有许多事件和包含额外信息的事件的天数的大小与没有显示事件的天数的大小不同。

过滤器改进:自定义过滤功能

Kendo UI过滤器组件获得了大量的新特性，包括创建自定义过滤器功能的能力。这使得开发人员可以在filter组件的默认设置之外创建他们自己的自定义过滤器操作(比如，所有产品的库存数量都是偶数)，从而为这个已经很强大的组件提供更深层次的自定义。

过滤器改进:每个字段自定义操作符

默认情况下，Kendo UI Filter组件在每个字段上提供所有的过滤器操作符(equal, not equal, contains等)。有了新的自定义操作符特性，开发人员现在可以预先定义可用操作符的显式列表。这为Filter组件提供了另一种级别的自定义，因为每个字段现在都可以有一组唯一的操作符，这些操作符只对该字段有意义。

React在R1 2020中更新

新组件:表单

KendoReact表单组件是一个快速、轻量级的包，用于零依赖的表单状态管理——你很难找到在React中构建表单的更有效的方法。该表单由KendoReact Scheduler等组件在内部使用，既可用于KendoReact组件，也可用于在React应用程序中调用表单的任何场景。第一个版本支持模型、验证状态、聚焦、模糊和修改状态，以及供编辑器提供这些状态的HOC。当然，该组件是完全可访问的，并且与WCAG 2.1和WAI-ARIA标准兼容，就像KendoReact UI库的其他部分一样。

新组件:抽屉

新的KendoReact Drawer小部件提供了一个具有展开和折叠功能的标准抽屉，以实现流畅的导航体验。您可以为每个导航项定义图标和文本，并利用方便的功能，如迷你模式，当您想只显示每个项目的图标，以有效地利用网页的房地产。

新组件:卡片

KendoReact Card小部件是一个额外的布局元素，可以帮助开发人员创建美观和现代的应用程序设计。随着Bootstrap和Material Design的普及，这个布局组件可以单独使用，也可以作为其他组件(例如ListView)模板的一部分，以创建引人注目的用户体验。

新组件:复选框

到目前为止，可以通过将KendoReact主题中的CSS类应用于HTML输入元素来对复选框进行样式化。虽然到目前为止这个工作还可以，但是为了实现与React更深层次的集成，我们决定为React创建一个新的、独立的复选框组件!它有助于在使用KendoReact编写的React应用程序中的所有UI元素之间提供统一的外观和感觉，当然也会在其他更复杂的组件中内部使用。除了与各种设计语言集成之外，Checkbox组件还支持已检查、未检查、不确定和禁用状态，以及处理附带标签等项的内置属性。

新组件:Avatar

在今天的应用程序中，头像代表了很多东西:社交媒体上的头像，信息平台上的聊天头像——甚至是图标。使用KendoReact Avatar组件，开发人员现在可以通过设置图像、图标或使用首字母缩写作为化身，快速而流畅地在应用程序中表示人物或实体。这些项目的形状可以通过快速配置选项设置为正方形、圆形或一般圆形。

新组件:过滤器

创建过滤器表达式不仅仅是一个简单的“以…开始”和“包含”绑定到单个复选框。虽然这可能在某些情况下有效，但用户通常需要使用多个过滤器，以各种方式组合它们(例如，“单价高于18美元且产品有库存”)。这意味着过滤很快就会变得相当复杂。这就是KendoReact Filter(也称为查询生成器)的用途。该组件为构建从简单到非常复杂的过滤器表达式提供了直观的用户体验。然后，它们可以与其他KendoReact组件一起使用，比如Data Grid，或者过滤任何数据集合。

数据工具包更新

Data Tools包最初是随着KendoReact Pager组件的引入而引入的，它通过添加更多的UI组件(如Pager、Filter等)以及处理库来帮助管理React应用程序中的数据集合，从而不断扩展。

调度器改进:自定义渲染

KendoReact Scheduler提供了跨事件和组件的其他元素的默认设计，这取决于与组件一起实现的设计语言。有了新的自定义渲染特性，我们的React Scheduler可以很容易地控制事件的外观和感觉，让用户能够深度定制Scheduler的渲染。

调度器改进:键盘导航

有了新的键盘导航功能，KendoReact Scheduler完全支持导航和与各种元素交互，只需使用键盘作为输入。这不仅有助于提高用户的工作效率，而且在键盘导航是与web应用程序交互的唯一选择的可访问性场景中也很有帮助。

调度器改进:可访问性

作为我们对可访问性承诺的一部分，KendoReact Scheduler现在符合可访问性标准(WCAG 2.1、Section 508和WAI-ARIA)。这是组件的开箱即用，确保任何React开发人员都可以通过包含最新版本的React Scheduler来提高其应用程序的可访问性级别。

树列表改进:列虚拟化

由于新的列虚拟化特性，TreeList组件可以处理跨其数据集的大型列集的数据。虚拟化的工作原理是根据需要加载数据，并在用户滚动跨列时回收页面上的UI元素。这留下了完整的数据集的印象，而没有将所有HTML加载到页面的性能损失。

树列表改进:冻结列

在列结构中显示数据对于TreeList至关重要，当用户水平滚动时，某些列可能需要永久显示。有了新的冻结列(锁定列)特性，KendoReact TreeList可以在初始呈现时，或者在最终用户滚动经过组件时，轻松地冻结/锁定组件左侧或右侧的列。

树列表改进:调整列的大小和重新排序

在React TreeList的可用列特性的基础上，这个新版本为最终用户提供了通过拖动resize指示器来调整列宽度的能力，甚至可以重新排序显示列的顺序。这确保了他们的任何数据视图都可以定制和调整，以适应他们的屏幕和需求。

树列表改进:多列标题

通常，一个列可能需要更多的上下文，而不仅仅是它在标题中的字段名—特别是当列以某种方式相关时。由于KendoReact TreeList的多列标题特性，开发人员可以添加跨多个列标题的父标题。这些列也可以重新排序和调整大小，以表示它们所包含的整个子列组。

新的演示:股票投资组合仪表板样本应用程序

作为帮助KendoReact开发人员提高生产力的持续努力的一部分，我们整理了一个示例应用程序，突出了我们在一个高需求场景中最受欢迎的组件:一个财务仪表板。这就是为什么我们创建Stock Portfolio样例应用程序，它提供了一个时髦的界面，用于显示实时更新数据，并与我们的组件进行交互，以查看某些股票的历史。

这个示例包括KendoReact数据网格、数据可视化(股票图表是高度可见的)和各种表单元素，以帮助创建一个令人愉快的用户体验来突出显示财务数据。这也是学习KendoReact组件以及如何使用它们构建业务应用程序的好方法。

NumericTextBox:刷新

NumericTextBox是有史以来第一个KendoReact组件，多年来，我们已经看到开发人员在一些有趣的需求和场景中使用它，超出了我们最初的范围。这就是为什么我们花时间重新设计NumericTextBox，以确保它能够适应我们与用户一起发现的所有用户体验场景。

R1 2020中的Angular更新

新组件:TreeList

Angular剑道UI中最令人期待的组件之一是TreeList组件，在R1 2020中，这个UI小部件被添加到已经很广泛的Angular UI组件列表中!TreeList结合了TreeView的分层布局和Data Grid的列和表格结构。这与网格中的传统层次结构不同，因为TreeList中的数据是完全同构的，列在父行和子行之间对齐。

这个初始版本的TreeList从一开始就包含了大量现成的功能，包括数据绑定、分页、排序、过滤、编辑和导出到PDF和Excel等功能。还有许多特定于列的功能，如重新排序和调整列的大小、虚拟列、冻结或锁定列，以及内置的列菜单。这些只是这个初始版本中可用的一些功能!

新组件:复选框

你可能以前在Angular的剑道UI中使用过复选框，但到目前为止，它只是通过应用CSS类。在R1 2020版本中，Kendo UI团队整合了一个可以应用于本地复选框HTML元素的Angular指令。这不仅提供了与你最喜欢的Kendo UI主题(Default、Bootstrap或Material等)相关的样式，还确保了这个复选框只是增强了Angular框架已经提供的功能。

新组件:单选按钮

与上面的复选框组件类似，Angular的剑道UI团队也会创建一个指令，以帮助所有用剑道UI为Angular组件编写的Angular应用都能保持一致的样式。由于单选按钮和复选框都是构建表单的标准部分，这两个组件有助于确保表单的所有方面都可以用Angular的Kendo UI来构建。

新组件:Avatar

在今天的应用中，化身代表了许多东西;社交媒体上的头像，即时通讯平台上的聊天头像，甚至是图标。有了Angular Avatar组件的Kendo UI，开发人员可以通过设置图像、图标或使用首字母缩写，轻松地在应用程序中添加一种时尚的方式来表示人物或实体。这些项目的形状可以通过快速配置选项设置为正方形、圆形或一般圆形。

新组件:卡片

Angular Card小部件的Kendo UI是一个额外的布局元素，可以帮助开发人员设置漂亮而现代的应用程序设计。随着Bootstrap和Material Design的普及，这个布局组件可以单独使用，也可以作为其他组件模板的一部分，以创建引人注目的用户体验。作为实现的一部分，该组件提供了清晰和定义的部分，如标题和内容，以及通过按钮定义卡片操作的能力，这些按钮可以定制以满足您的交互需求。

新组件:芯片

Angular Chip组件的Kendo UI涵盖了材料设计和移动应用设计中流行的元素风格。该组件由一个容器(通常采用“药丸”设计)、文本、可选图像和移除图标组成。它可以作为组件的一部分，提供多个输入或快速列出可由最终用户选择的预定义选项。

作为开发Angular Chip组件的一部分，Angular团队的Kendo UI还引入了芯片列表(Chip List)，它为开发人员提供了一种提供芯片列表的简单方法。该组件还提供了一个选择功能，允许开发人员轻松维护当前选择的芯片集。

新建组件:文件选择

与Upload组件类似，Angular File Select组件的Kendo UI为最终用户提供了一种直观的方式，让他们可以从本地机器上选择单个或多个文件。File Select组件的独特之处在于，它允许开发人员完全控制文件上传的时间和方式。

FileSelect自带了许多现成的配置选项，但如果你需要对行为和外观进行一些额外的控制，该组件完全支持使用Angular框架模板的模板。此外，像所有针对表单的UI组件一样，FileSelect组件集成了响应式表单!

新增组件:浮动标签

这可能需要贴上“新鲜”的标签。浮动标签几乎已经成为当今网页设计中输入元素的一个标准方面。虽然浮动标签已经存在于Angular组件本身的剑道UI中，但这个独立组件让开发人员能够在自己的输入元素中实现浮动标签，或者增强Angular UI组件的其他剑道UI。在过去的文档中，您可能已经看到它被称为“TextBoxContainer”组件，但我们认为将其称为“浮动标签”组件似乎更好!

树状视图改进:拖放节点

这个特性一直是Angular剑道UI中最受欢迎的特性之一，我很高兴地宣布，我们在Angular TreeView中添加了拖放功能!使用TreeView的新拖放功能，最终用户可以将节点拖到TreeView的其他区域，包括同一层次结构中的项目以及不同层次结构中的节点。如果该节点有任何子节点，它们也将随着节点一起被拖拽。如果你在同一个页面上有多个treeview，你甚至可以在两个不同的组件之间拖放节点!

网格改进:列虚拟化

有了Angular Grid的Kendo UI中的列虚拟化，开发人员可以将任意多的列放入Grid中，而不用担心性能下降。结合已有的行虚拟化，Angular数据网格可以支持包含无数行和列的庞大数据集。正如你在动画gif中看到的，这个操作非常流畅，而且Angular Grid的剑道UI一点也不费力!

网格性能改进

通过实现列虚拟化的工作，Angular的剑道UI团队研究了Angular Grid的源代码，并实现了各种性能改进的调整，以确保R1 2020版本的剑道UI是迄今为止最快的。这包括组件及其数据的初始加载，以及滚动等交互。

编辑器改进:键盘导航和可访问性

有了新的键盘导航功能，Angular编辑器的剑道UI现在只需要一个键盘就可以很容易地使用。理想的场景，可以提高生产力，只需使用键盘或提高可访问性。

编辑器现在还内置了对开箱即用的可访问性的支持。在没有额外配置选项的情况下，开发人员可以依赖编辑器来兼容Section 508、WCAG 2.1和WAI-ARIA标准。

上传改进:支持分块

上传文件时，传统的方法是将整个文件从头到尾流式传输。不幸的是，这有点脆弱，因为网络连接可能会中断。这就是块处理发挥作用的地方，将文件分解成更小的块(块)，并按顺序上传这些块。使用这种方法，可以在网络连接恢复后轻松地恢复上传，并且可以帮助暂停和恢复上传。在R1 2020中，Angular上传组件的Kendo UI现在支持分块任何选定的文件!

新的演示:金融样本应用程序

来自Angular剑道UI团队的新财务应用程序为任何财务仪表板提供了一个很好的基础，或者只是为Angular开发人员的任何剑道UI提供了一个额外的学习工具!这个华丽的应用程序展示了Angular图表和数据网格的剑道UI之间的集成，以及剑道UI为Angular组件库提供的其他UI组件。

Vue更新在R1 2020

新组件:下拉列表

DropDownList是一个表单组件，它允许用户从预定义的值列表中选择单个值。可以把它看作是一个带有数据绑定、过滤等增强功能的“select”元素!

没有某种方式让用户输入文本的应用程序是什么?这是我们在任何原生UI库中首先处理的组件之一，Vue也不例外。Input组件当然完全集成了所有的Kendo UI主题，这有助于在整个应用程序中创建统一的外观和感觉。

新组件:NumericTextBox

继续强调输入，NumericTextBox非常适合任何需要某种数字(简单数字、货币、百分比等)的场景。与我们创建的任何Vue组件一样，NumericTextBox与我们所有可用的主题一起工作，并符合WCAG 2.1和WAI-ARIA可访问性标准。

新组件:Dialog

在需要向用户展示某些特定信息并提示他们采取操作的场景中，Dialog组件非常有用。这通常以模态方式描绘，以减少干扰。当然，作为开发人员，您可以完全控制标题、对话框以及操作按钮(及其事件)的内容，以确保组件可以轻松地集成到现有的应用程序中。

新组件:动画

动画可能很难实现。剑道UI团队需要在所有组件中使用动画，以确保它们适当地“弹出”，并具有所有剑道UI组件所具有的出色外观和感觉。因为这是整个库中使用的剑道UI的一部分，我们想把这项工作暴露给所有的剑道UI用户，让你可以创建自己的动画，而不仅仅是在使用剑道UI组件时。这个包可以用来帮助动画几乎任何东西在你的应用程序。

新建组件:弹出

剑道UI弹出组件是许多剑道UI组件的基础，包括下拉列表和其他下拉组件。这不仅有助于在交互(例如单击按钮)时将内容显示在页面上，还需要能够配置为以特定方式显示和对齐，使用边界检测(如果弹出框出现在当前视图端口之外)，甚至是动画。当我们需要构建这个功能来开始创建更多的本地Vue UI组件时，我们认为将这个功能也公开给我们的用户将是非常棒的!