《Blazor》的teleerik UI免费下载30天试用版

3.0.0中的重大变化

常见的变化

OnRead

OnRead所有组件的处理程序现在都希望您将数据设置为事件参数而不是组件数据属性。这种新的数据绑定机制将不再依赖于组件的生命周期,并将支持过去不支持的新功能(例如Excel导出所有页面)OnRead)。

使用手动数据操作时,注意以下变化:

  • 设置TItem组件属性。这将提供关于模型类型的信息,而不是数据
  • 设置TValue属性组合框DropDownList多选
  • 不要设置数据属性。相反,设置arg游戏。数据IEnumerable)在…OnRead处理程序。
  • 没有必要铸造由返回的项目ToDataSourceResult ()当设置arg游戏。数据
  • 不要设置TotalCount。该属性现在被删除,取而代之的是arg游戏。总计事件参数(int)在…OnRead处理程序。
  • 所有数据的聚合现在都通过arg游戏。AggregateResultsIEnumerable < AggregateResult >)。的AggregateResults事件参数仅对支持聚合的组件公开。如果网格被绑定到数据表,变通方法仍然是必要的
  • 如果您缓存了DataSourceRequest对象,以便设置数据后来,新的做法是重置网格状态,以便OnRead再次被调用
  • 绑定到ObservableData通过OnRead不再支持。
  • Blazor的UI3.0.1介绍了一种重新绑定方法触发OnRead用于按需数据更新。这是一个网格的重新绑定示例还有一个类似的用于组合框

OnRead在Blazor 2.30版本和3.0版本之后的用户界面中的使用

Blazor 2.30的UI Blazor 3.0的UI
 
列表 SourceData {get;设置;} = new();列表 ComboData {get;设置;} List GridData {get;设置;} int ComboTotal {get;设置;} = 0; int GridTotal { get; set; } = 0; protected void OnComboRead(ComboBoxReadEventArgs args) { var result = SourceData.ToDataSourceResult(args.Request); ComboData = result.Data.Cast().ToList(); ComboTotal = result.Total; } protected void OnGridRead(GridReadEventArgs args) { var result = SourceData.ToDataSourceResult(args.Request); GridData = result.Data.Cast().ToList(); GridTotal = result.Total; // aggregates N/A }
 
列表 SourceData {get;设置;} = new();保护无效OnComboRead(comboboxreaddeventargs args) {var结果= SourceData.ToDataSourceResult(args. request);arg游戏。数据= result.Data; args.Total = result.Total; } protected void OnGridRead(GridReadEventArgs args) { var result = SourceData.ToDataSourceResult(args.Request); args.Data = result.Data; args.Total = result.Total; args.AggregateResults = result.AggregateResults; }
  • PopupClassPopupHeightPopupWidth属性被移除,取而代之的是嵌套的弹出设置标签。适用于自动完成组合框DropDownList多选。嵌套的标记名称依赖于组件名称。

Blazor 2.30版本和3.0版本之后的UI弹出配置

Blazor 2.30的UI Blazor 3.0的UI
 
    

其他常见变化

组件的变化

网格

  • 改变了GridEditModeEnum默认值from内联没有一个。属性中显式启用网格编辑添加编辑命令按钮工作。
  • 将弹出式编辑表单的方向改为垂直。这与默认值一致TelerikForm取向并在所有组件中弹出编辑表单。Blazor 3.1的UI将提供弹出式配置设置。
  • 使用IFilterDescriptor电网状态,而不是FilterDescriptorBase
  • 删除方法ExportToExcel ()MemoryStream)赞成ExportToExcelAsync ()任务< MemoryStream >)。
  • 删除方法ExportToCsv ()MemoryStream)赞成ExportToCsvAsync ()任务< MemoryStream >)。

Blazor 2.30版本及3.0版本之后的UI中的网格导出流

Blazor 2.30的UI Blazor 3.0的UI
TelerikGrid GridRef {get;设置;}无效ExportToExcel() {var exportStream = GridRef.ExportToExcel();}无效ExportToCsv() {var exportStream = GridRef.ExportToCsv();}
TelerikGrid GridRef {get;设置;} async任务ExportToExcel() {var exportStream = await GridRef.ExportToExcelAsync();} async Task ExportToCsv() {var exportStream = await GridRef.ExportToCsvAsync();}
  • 删除ExpandedRowsICollection < int >)赞成ExpandedItemsICollection < TItem >)在…GridStateExpandedItems期望项,而不是项索引。此外,PropertyName的论点onstatechange事件改变从“ExpandedRows”“ExpandedItems”在层次结构场景中。

在Blazor 2.30版本和3.0版本之后的UI中扩展网格行

Blazor 2.30的UI Blazor 3.0的UI
列表 GridData {get;设置;} async Task OnGridStateInit(GridStateEventArgs args){//扩展第一个网格行args. gridstate . expandedrows =新列表 {0};}
列表 GridData {get;设置;} async Task OnGridStateInit(GridStateEventArgs args){//展开第一个网格行args. gridstate . expandeditems = new List {GridData.FirstOrDefault()};}

其他组件

  • 按钮-删除主要的参数支持ThemeColor类型的字符串。有一个新的静态类Telerik.Blazor.ThemeConstants.Button.ThemeColor使用一组预定义的主题颜色。要获得旧的主按钮样式,请设置ThemeColor =“@ThemeConstants.Button.ThemeColor.Primary”

Blazor 2.30版本和3.0版本之后的UI中的主要按钮样式

Blazor 2.30的UI Blazor 3.0的UI
< TelerikButton ThemeColor = " @ThemeConstants.Button.ThemeColor。主" / >
  • DateInput-删除ParsingErrorMessage(自2.8版起已废弃),支持DateInput_ParsingErrorMessage本地化的字符串

  • 加载程序LoaderContainer——改变大小参数类型的LoaderSize枚举,字符串(下面的例子)。的默认值。大小ThemeConstants.Loader.Size.Medium。有一个新的静态类Telerik.Blazor.ThemeConstants.Loader.Size使用一组预定义的大小属性。

  • 通知加载程序LoaderContainer——改变ThemeColor参数类型的ThemeColors枚举,字符串。的默认值。ThemeColorThemeConstants.Loader.ThemeColor.Primary。有一个新的静态类Telerik.Blazor.ThemeConstants.Loader.ThemeColor使用一组预定义的属性。

Blazor 2.30版本及3.0版本之后的UI中的Loader和LoaderContainer

Blazor 2.30的UI Blazor 3.0的UI
< TelerikLoader大小= " @LoaderSize。大型“ThemeColor = " @ThemeColors。三级" / >
< TelerikLoader大小= " @ThemeConstants.Loader.Size。大型“ThemeColor = " @ThemeConstants.Loader.ThemeColor。三级" / >

文本框标签在UI为Blazor 2.30版本和3.0版本之后

Blazor 2.30的UI Blazor 3.0的UI
  
  • TileLayout-引入可选Id属性的TileLayoutItem。的OnResize事件处理程序将接收类型为的参数TileLayoutResizeEventArgs。的OnReorder事件处理程序将接收类型为的参数TileLayoutReorderEventArgs。两个事件参数都将指向tile项(arg游戏。Id)并定义组件是否应该在事件发生后重新呈现(arg游戏。ShouldRender)。

在Blazor 2.30版本和3.0版本之后的UI中,TileLayout调整大小和reoder事件

Blazor 2.30的UI Blazor 3.0的UI
     @code {void OnResizeHandler() {} void OnReorderHandler() {}}
     @code {void OnResizeHandler(TileLayoutResizeEventArgs args) {if (args。Id == "tile1"){//…}} void OnReorderHandler(TileLayoutReorderEventArgs){如果(args。Id == "tile1"){//…}}
  • TreeList——改变TreeListEditModeEnum默认值from内联没有一个。的树列表编辑应该显式地启用添加编辑命令按钮工作。
  • TreeList-将弹出式编辑表单的方向改为垂直这与默认值一致TelerikForm取向并弹出编辑所有组件的表单。Blazor 3.1的UI将提供弹出式配置设置。

  • 树状视图-删除ExpandedField参数支持ExpandedItemsIEnumerable <对象>)。TreeView项的展开状态将不再依赖于模型属性。ExpandedItems支持双向绑定。

TreeView扩展了Blazor 2.30版本和3.0版本之后的UI项目

Blazor 2.30的UI Blazor 3.0的UI
    
IEnumerable TreeData {get;设置;} protected override void OnInitialized(){//扩展项依赖于//每个项的IsExpanded值}公共类TreeItem{公共bool IsExpanded {get;设置;}}
    
IEnumerable TreeData {get;设置;} IEnumerable ExpandedItems {get;设置;} = new List();OnInitialized(){//扩展项依赖于ExpandedItems = FlatData。Where(x => x. haschildren == true).ToList();}公共类TreeItem {}
  • 窗口——改变大小参数类型WindowSize枚举,字符串。有一个新的静态类Telerik.Blazor.ThemeConstants.Window.Size使用一组预定义的大小属性。的大小属性将在未来的Blazor版本的UI中生效。要保持旧的行为,设置窗口宽度300 px800 px1200 px

参数名称

我们正在使API的命名更加一致。

  • 抽屉里-内容RenderFragment被重命名为DrawerContent
  • 抽屉里-IsSeparatorField参数(自2.27版起已废弃)被删除,取而代之的是SeparatorField
  • 编辑器-UpdateInterval参数重命名为DebounceDelay
  • 步进-IsCanceled财产StepperStepChangeEventArgs(2.26版起已废弃)被移除,取而代之的是IsCancelled

渲染和主题

HTML呈现和CSS类已经针对多个组件进行了更新,包括按钮,文本框组件,下拉组件,日期/时间选择器,复选框,开关。重新创建任何自定义主题通过进口从头开始

State的CSS类

一些与组件状态相关的CSS类被重命名。

Blazor 2.30的UI Blazor 3.0的UI
k-state-disabled k-disabled
k-state-focused k-focus
k-state-invalid k-invalid
k-state-selected k-selected

k-widget类

k-widgetCSS类被从所有组件中移除。如果在自定义CSS代码中使用该类,请将其替换为相应的特定于组件的类。

Blazor 2.30的UI Blazor 3.0的UI
  
< div class = " k-grid " > < / div > <跨类= " k-combobox " > < / span > <时尚> . foo .k-grid, . foo .k-combobox{/ *……*/} 

组件的宽度

  • 下拉组件-删除的默认内联样式宽度:300像素。新的默认宽度为100%并来自主题CSS。适用于自动完成组合框DropDownList多选
  • 文本框组件-更改了默认主题宽度从12.4 em100%。适用于DateInput日期/时间选择器MaskedTextBoxNumericTextBox文本区域文本框

输入呈现

  • 文本框和下拉组件具有新的一致的HTML呈现。注意k-input类,该类现在用于外部组件元素,而不是<输入>

         

REPL变化

Blazor的teleerik REPL始终使用最新的官方版本Telerik.UI.for.BlazorNuGet包。

之前创建的任何代码片段Telerik.UI.for.Blazor3.0版本(2022年1月19日)可能需要更新,因为上面的更改列表。

在本文中
Baidu
map