AntDesignBlazor示例——创建列表页
本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。
示例代码仓库:https://gitee.com/known/BlazorDemo
1. 学习目标
- 使用
Table
组件创建列表页面 - 使用
DisplayName
特性显示中文表头 - 使用模板和
Tag
组件显示高温数据 - 使用
TitleTemplate
自定义栏位表头
2. 创建Table列表
1)双击打开Components\Pages\Weather.razor
页面组件,删除如下代码。
2)添加如下Table
组件,将天气数据绑定到DataSource
属性上,定义列表属性栏位。
3)点击运行按钮,效果如下:
3. 显示中文表头
1)优化列表字段显示为中文名称,在WeatherForecast
类的属性上添加DisplayName
特性,需要引用命名空间@using System.ComponentModel
2)点击运行按钮,效果如下:
4. 使用模板显示高温数据
1)优化列表温度栏,当温度大于30时用红色标记显示,这里需要用到模板列,模板中用Tag
组件来显示高温数据,优化代码如下:
2)点击运行按钮,效果如下:
5. 显示自定义表头
1)使用TitleTemplate
自定义温度标题,在标题前插入一个Icon
字体图标。
2)点击运行按钮,效果如下:
6. 总结
关于Table
组件的创建和内容显示基本分享这些,标题模板和数据模板基本上满足实际项目需求,具体需求可以通过此例举一反三;其他更多示例可参考AntDesign Blazor
的官网文档 https://antblazor.com/zh-CN/components/table 。
7. 视频
分类:
00 Blazor
Known 是基于 Blazor 轻量级、跨平台、低代码、易扩展的插件开发框架。
源码:https://gitee.com/known/Known
源码:https://github.com/known/Known
如果对您有帮助,点击⭐Star⭐关注 ,感谢支持开源!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战