本示例是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 。