AntDesignBlazor示例——建立列表頁

known發表於2023-12-02

本示例是AntDesign Blazor的入門示例,在學習的同時分享出來,以供新手參考。

示例程式碼倉庫:https://gitee.com/known/AntDesignDemo

1. 學習目標

  • 使用Table元件建立列表頁面
  • 使用DisplayName特性顯示中文表頭
  • 使用模板和Tag元件顯示高溫資料
  • 使用TitleTemplate自定義欄位表頭

2. 建立Table列表

1)雙擊開啟Components\Pages\Weather.razor頁面元件,刪除如下程式碼。

image

2)新增如下Table元件,將天氣資料繫結到DataSource屬性上,定義列表屬性欄位。

image

3)點選執行按鈕,效果如下:

image

3. 顯示中文表頭

1)最佳化列表欄位顯示為中文名稱,在WeatherForecast類的屬性上新增DisplayName特性,需要引用名稱空間@using System.ComponentModel

image

2)點選執行按鈕,效果如下:

image

4. 使用模板顯示高溫資料

1)最佳化列表溫度欄,當溫度大於30時用紅色標記顯示,這裡需要用到模板列,模板中用Tag元件來顯示高溫資料,最佳化程式碼如下:

image

2)點選執行按鈕,效果如下:

image

5. 顯示自定義表頭

1)使用TitleTemplate自定義溫度標題,在標題前插入一個Icon字型圖示。

image

2)點選執行按鈕,效果如下:

image

6. 總結

關於Table元件的建立和內容顯示基本分享這些,標題模板和資料模板基本上滿足實際專案需求,具體需求可以透過此例舉一反三;其他更多示例可參考AntDesign Blazor的官網文件 https://antblazor.com/zh-CN/components/table

相關文章