Progress Telerik UI for Blazor

Blazor TreeView

  • 让用户在应用程序内甚至应用程序外的页面中导航,添加文本、图标和图像,使用选择框和复选框,并使用Blazor TreeView组件响应事件。
  • 该组件是最大的真正的原生Blazor组件套件的一部分- Telerik UI为Blazor设计,完全适合任何应用程序的需求。
  • Blazor UI套件还提供了专业设计的主题,支持开关的翻转,文档处理库,丰富的文档和演示,以帮助您立即开始。
Telerik UI的Blazor套件
Nasa, Visa,微软 福克斯,三星,IBM 世界银行集团,沃尔沃
  • Blazor TreeView概述

    Blazor TreeView是一个UI组件,允许您在WebAssembly (WASM)和服务器端Blazor应用程序中以树状结构表示平面和分层数据。它提供了多种内置功能,如导航项及其子项、按需加载数据、为各个节点定制模板和键盘导航。

    Telerik UI Blazor TreeView概述
  • 拖放

    移动节点用拖放的TreeView功能简化了组件的工作流程。该特性是通过Draggable参数启用的,该参数允许用户在TreeView内部或TreeView之间拖放节点。该特性使用OnDrop事件,该事件在节点被删除时被触发。

    Telerik UI的Blazor TreeView拖放
  • TreeView数据绑定

    TreeView组件可以绑定到任何平面数据源(在一个级别上可用的项的集合)和层次结构(项的多级父子关系集合)。

    绑定TreeView到平面数据的例子。

    将TreeView绑定到层次数据的例子。

    用于Blazor数据绑定的Telerik UI
  • TreeView多级绑定

    TreeView组件允许您为不同级别的节点额外定义不同的绑定设置。这提供了极大的灵活性,因为节点的子节点可以使用与其父节点不同的数据字段或模型。

    Blazor TreeView层次化数据的例子,它使用不同的父和子模型。

  • 定制树视图模板

    TreeView组件通过它的模板让您完全控制节点的外观。您可以为所有TreeView节点定义一个公共模板,也可以为每个节点级别定义一个不同的模板。此外,模板还可以根据应用程序的逻辑来呈现特定的内容。您可以在其中使用组件,从而提供丰富的内容,而不是纯文本。

    使用模板定制Blazor TreeView组件的示例。

  • TreeView按需加载数据

    TreeView组件允许您一次获取所有项,或者在用户展开树节点时按需加载数据。对于需要加载大量数据的情况,可以通过使用延迟加载(按需加载数据)和只加载子项的扩展子集来提高性能。

    用Blazor TreeView按需加载数据的例子。

    Telerik UI的Blazor加载按需
  • Blazor TreeView事件

    OnItemClick事件作为用户单击TreeView中的项目的响应而触发,并为您提供了一种处理此交互以执行有意义的工作的方法—例如,您可能希望在单独的组件中显示关于所单击节点的详细信息。与OnItemClick事件类似,当用户在TreeView中修改选择时,SelectedItemsChanged被触发。以下是所有活动的列表:

    • OnExpandOnItemClick
    • OnItemDoubleClick
    • OnItemContextMenu
    • SelectedItemsChanged
    • CheckedItemsChanged
  • 复选框选择

    为TreeView的每一行添加一个复选框,以便用户选择多个项目,甚至整个项目层次结构,以便对它们执行单个操作。

    在这个演示中探索Blazor TreeView复选框

    Telerik UI Blazor TreeView
  • Blazor TreeView节点选择

    TreeView中的节点可以被选择,这样它们就可以以某种方式被处理——例如,在TreeView中选择一个显示文件和文件夹结构的项目可以在一个单独的组件中打开文件内容。

    Telerik用户界面的树视图节点选择
  • TreeView辅助功能和键盘导航

    与Blazor组件的所有其他Telerik UI一样,TreeView组件支持开箱式键盘导航和web可访问性标准实现(WCAG, Section 508和WAI-ARIA屏幕阅读器属性)。这使得仅使用键盘就可以轻松地在树节点中导航,以及通过辅助技术访问组件内容。

    Blazor TreeView内置键盘导航的例子。

    Telerik UI Bazor键盘导航
  • TreeView事件

    您可以使用TreeView OnExpand事件轻松地处理代码中的用户操作。当用户展开或折叠节点(使用鼠标或键盘)时触发事件时,您可以轻松地将业务逻辑应用于这些操作。

    OnExpand事件让你在用户扩展节点时可以灵活地使用懒加载TreeView数据。

    在TreeView中处理用户展开和折叠的例子。

    Telerik UI Blazor事件
  • Blazor TreeView主题

    Telerik Blazor TreeView有几个内置主题比如Default(我们自己的样式),Material(基于材质设计指南)和Bootstrap(看起来像Bootstrap样式以便更好地集成)。属性可以轻松地自定义任何开箱即用的主题,或者使用属性创建新的主题来匹配颜色和品牌Telerik SASS ThemeBuilder应用程序

    Telerik UI的Blazor TreeView主题

所有Blazor组件

下一个步骤

发射演示

看看Telerik UI的Blazor在行动,并检查它可以做多少开箱即用。

下载免费试用

尝试Telerik UI Blazor与专门的技术支持。

Baidu
map