Blazor PanelBar概述
的Blazor PanelBar组件显示数据(平或分层)在手风琴式结构中。除了内置的导航功能,您可以浏览项及其子项,定义模板,渲染文本和图标/图片,并回应事件.
的PanelBar组件Blazor的Telerik UI,一个专业级的UI库,包含100个本地组件,用于构建现代和功能丰富的应用程序。想要试用它,可以注册一个30天的免费试用期。
创建Blazor PanelBar
- 添加
TelerikPanelBar
标签 - 填充
数据
属性中包含您希望出现在面板栏中的项的集合。组件将自动识别属性名,如Id
,ParentId
,文本
还有其他一些。否则,使用绑定配置自定义属性名.
@*向PanelBar提供模型的平面集合*@ @code{公共列表 Items {get;设置;}公共类PanelBarItem{公共字符串文本{获取;设置;} public bool禁用{get;设置;}公共字符串Url{获取;设置;} public List Items {get;设置; } } protected override void OnInitialized() { Items = GenerateData(); base.OnInitialized(); } private List GenerateData() { List collection = new List() { new PanelBarItem() { Text = "Item 1", Items = new List() { new PanelBarItem() { Text = "Item 1.1" }, new PanelBarItem() { Text = "Item 1.2", Disabled = true, Items = new List() { new PanelBarItem() { Text = "Item 1.2.1" }, new PanelBarItem() { Text = "Item 1.2.2" } } } } }, new PanelBarItem() { Text = "Item 2", Items = new List() { new PanelBarItem() { Text = "Item 2.1", Items = new List() { new PanelBarItem() { Text = "Item 2.1.1" } } }, new PanelBarItem() { Text = "Item 2.2", Url = "https://google.com" } } }, new PanelBarItem() { Text = "Item 3" } }; return collection; } }
数据绑定
要显示任何项,Blazor PanelBar需要一个数据源,您可以通过数据
财产。PanelBar允许您以平面数据和层次结构的方式显示项目。阅读更多关于Blazor PanelBar数据绑定…
面板栏项的元素
面板栏中的每个项由一个头
而且内容
.下图说明了这个概念。
的头
包含相应数据项(模型)的文本。的内容
表示层次结构中没有子项的项。
模板
PanelBar允许自定义它的项目元素。使用头模板而且内容模板重写默认呈现。一个ContentTemplate
像子项一样显示。它只对没有子项的项呈现。
导航
PanelBar可用于在应用程序中的不同页面之间导航。阅读更多关于Blazor面板栏导航…
图标
为了说明每个项目的目的,Blazor PanelBar允许您添加图像、图标类或字体图标。阅读更多关于Blazor面板栏图标…
事件
Blazor PanelBar生成您可以处理以响应用户操作的事件。阅读更多关于Blazor PanelBar事件…
PanelBar参数
下表列出了PanelBar参数,这些参数与本页的其他特性无关。检查PanelBar API参考获取属性、方法和事件的完整列表。
参数 | 类型及默认值 | 描述 |
---|---|---|
类 |
字符串 |
将在组件的主包装元素上呈现的CSS类。 |
ExpandedItems |
IEnumerable <对象> |
展开的面板栏项的集合。支持双向绑定。欲知详情,请浏览ExpandedItems篇文章。 |
ExpandMode |
PanelBarExpandMode 枚举( PanelBarExpandMode。多个 ) |
面板栏是否允许一次展开单个或多个项目。欲知详情,请浏览ExpandMode部分。 |
面板条参考和方法
要执行PanelBar方法,请通过获取组件实例的引用@ref
.
PanelBar是一个通用组件。它的类型取决于它的模型的类型和对象的类型价值
.如果你不能提供价值
或数据
最初,你需要将相应的类型设置为TItem
而且TValue
参数.
下表列出了PanelBar方法。亦请参阅PanelBar API.
方法 | 描述 |
---|---|
重新绑定 |
刷新组件数据. |
@code{ private TelerikPanelBar PanelBarRef; }