AntDesignBlazor示例——创建列表页
本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。
示例代码仓库:https://gitee.com/known/AntDesignDemo
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 。
AntDesignBlazor示例——创建列表页的更多相关文章
- dedecms讲解-arc.listview.class.php分析,列表页展示
./plus/list.php - 动态展示栏目列表页(也可能是频道封面)arc.listview.class.php 是dedecms的列表页的相关处理类__construct() ...
- php创建简单的列表页
php创建简单的列表页 样例 代码 <?php $userInfo[] = array( 'id'=>'1', 'username'=>'fry', 'sex'=>'nan', ...
- 5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
- Django(十八)后台管理:列表页选项、编辑页选项、自定义后台页面
[参考]https://blog.csdn.net/u010132177/article/details/103814357 [参考]https://docs.djangoproject.com/zh ...
- PHPCMS列表页伪静态
phpcms v9内容管理系统可以方便建立网站,并且生成静态化,但是列表页往往采取伪静态,因为列表页太多每发一篇文章就生成一遍静态效率太低,phpcms列表页及分页伪静态规则如何设置呢? phpcms ...
- 夺命雷公狗ThinkPHP项目之----企业网站26之网站前台列表页的显示和完成分页功能
我们用大I接收到我们get过来的栏目页的id然后通过文章的ar_cateid 来判断是不是属于该栏目下的,如果文章表ar_cateid = 栏目表的cate_id 那么就可以选出我们要查找的信息, 然 ...
- 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台列表页面包屑导航的显示
我们做面包屑导航的原理其实也是很简单的,我们的思路是: 首先找到该分类的id ,我们可以通过大 I来进行获取得到: 然后通过 大 D 方法让数据进入model层里面进行循环迭代查询, 当然,测试时候发 ...
- 夺命雷公狗ThinkPHP项目之----企业网站13之文章列表页的实现(主要是分页的实现)
列表页这个其实是比较简单的一个,直接遍历除数据即可: public function lists(){ //$mod = M("Article")->select(); // ...
- 夺命雷公狗---DEDECMS----15dedecms首页栏目列表页导航部分完成
我们在点击导航页面的连接时候我们需要我们的连接跳到指定的模版页面,而不是随便跳到一个指定的A连接标签: 所以我们首先要将前端给我们的栏目列表模版拷贝到目录下,然后就可以创建栏目列表页面了,但是名字我们 ...
- Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页
在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...
随机推荐
- Python实现商城购物经典案例
代码分步骤思路: 商城添加商品:opea_db = [{'store_name': '手机','num': 1}] while True: store_name=input('请输入需要存放的商品(按 ...
- Unity UGUI的Image(图片)组件的介绍及使用
UGUI的Image(图片)组件的介绍及使用 1. 什么是UGUI的Image(图片)组件? UGUI的Image(图片)组件是Unity引擎中的一种UI组件,用于显示2D图像.它提供了一种简单而灵活 ...
- Go 如何正确关闭通道
序言 Go 在通道这一块,没有内置函数判断通道是否已经关闭,也没有可以直接获取当前通道数量的方法.所以对于通道,Go 显示的不是那么优雅.另外,如果对通道进行了错误的使用,将会直接引发系统 panic ...
- 代替forever下一个部署node的持久化工具---pm2
最近有个后端项目,用的是node,在持久化的时候会挂掉,详细了解到用的是nohup,然后先详细了解了一下nohup nohup是一个Linux命令,用于在系统后台不挂断地运行命令,退出终端不会影响程序 ...
- uwsgi配置
编辑nginx配置: server { listen 8098; server_name 127.0.0.1; location / { include uwsgi_params; # uwsgi_p ...
- IDEA集成码云gitee
参考链接:https://blog.csdn.net/bing_bg/article/details/106437008 1.下载安装git https://git-scm.com/download ...
- App性能指标(安装、冷启动、卸载、平均内存/cpu/fps/net)测试记录
[需求背景] 需要针对产品以及竞品做出横向对比,输出对应的比对测试报告,供产研进行产品性能优化依据 [测试方案] 对于主流的厂商和系统版本进行多维度的横向对比 厂商:华为系.小米系.蓝绿系.三星系.苹 ...
- Three.js中实现对InstanceMesh的碰撞检测
1. 概述 之前的文章提到,在Three.js中使用InstanceMesh来实现性能优化,可以实现单个Mesh的拾取功能 那,能不能实现碰撞检测呢?肯定是可以的,不过Three.js中并没有直接的A ...
- 这些负载均衡都解决哪些问题?服务、网关、NGINX
这篇文章解答一下群友的一系列提问: 在微服务项目中,有服务的负载均衡.网关的负载均衡.Nginx的负载均衡,这几个负载均衡分别用来解决什么问题呢? 在微服务项目中,服务的负载均衡.网关的负载均衡和Ng ...
- 如何vue3中使用全局变量,与Vue2的区别
对比: 在vue2.x中我们挂载全局变量或方法是通过是使用Vue.prototype.$xxxx=xxx的形式来挂载,然后通过this.$xxx来获取挂载到全局的变量或者方法 但是 在vue3.x中显 ...