AntDesignBlazor 學習筆記

AntDesignBlazor 是基于 Ant Design 的 Blazor 實作，開發和服務于企業級背景産品。我的 Blazor Server 學習就從這裡開始，有問題可以随時上 Blazor 中文社群 尋求幫助，問的問題多了，承蒙群主大人 James Yeung 看得起，居然讓我幫忙完善一下文檔，讓我一時間誠惶誠恐，浮想聯翩。

糾結再三，我決定還是先把學習過程中遇到的問題和解決方案先整理出來，如果确有價值再考慮合并到官方文檔不遲。是以下面的内容，不是使用教程，也沒有什麼系統性，完全是解決我自己在使用過程中遇到問題的記錄。

1. 使用 AntDesignBlazor，如果用 vs2019 的 Blazor 模闆建立工程，建議把模闆自帶的 bootstrap css 移除掉，否則會遇到樣式沖突的問題。

比如 Icon 元件跟文字中間對齊，設定 Style = "vertical-align:middle"，隻有在移除了 bootstrap css 才能顯示出期望的效果來。

2. 驗證碼圖檔可以放到 Input 的字尾 Suffix 中， 進而使輸入框與驗證碼顯示為一個整體

<Input Placeholder="Verify Code" Size="@InputSize.Large" @bind-Value="@VerifyCode" MaxLength="4" OnPressEnter="(e)=>submit()" >
                    <Prefix>
                        <Icon Type="key" />
                    </Prefix>
                    <Suffix>
                        <img src="@imgVerifyCode" @onclick="()=>refreshVerifyCode()" alt="看不清，換一張" style="cursor:pointer"/>
                    </Suffix>
                </Input>      

View Code

3. Icon 元件指定尺寸可以使用 Width / Height 屬性

<Icon Type="logout" Theme="outline"  
         Width="48" Height="48"
/>      

4. MenuItem 裡面的連結跳轉，最開始我是通過 OnClick 去調用 nav.NavigateTo() 方法，後來又改用 <a> 标簽，這兩種都不能實作跳轉以後菜單項的高亮，最後在文檔裡面找到了正确的做法 RouteLink 屬性

<MenuItem Key="1" RouterLink="/" RouterMatch=NavLinkMatch.All>
        <Icon Type="home" Theme="outline" />
        <span>Home</span>
    </MenuItem>      

5. Model 對話框指定寬度，可以通過 Style 指定 Width

<Modal Title="title" Style="width: 50%" />      

6. Grid 元件的 Row、Col 與 @if-else 有沖突，會導緻編譯失敗，解決的辦法是使用完全類名 <AntDesign.Row><AntDesign.Col /></AntDesign.Row>

7. Tree 元件指定高度，祭出 style 大法 style="overflow-y: auto; max-height: 80vh;"

8. Table.Column 格式化輸出， 使用 Format 屬性，标題對齊 HeaderStyle 屬性，列對齊 Style 屬性

<Table @ref="table" Bordered="true"
        TItem="月結明細查詢"
        DataSource="@details"
        Total="@total"
        PageSize="15"
        OnRow="onRow" >
        <Column @bind-Field="@context.月份" Style="text-align:center;" HeaderStyle="font-weight:bold; text-align:center" Format="yyyy-MM"/>
        <Column @bind-Field="@context.金額" Style="text-align:center;" HeaderStyle="font-weight:bold; text-align:center" Format="￥#0.00"/>
    </Table>      

9. Table 設定奇偶行背景色，我試過多種方式，可以通過 OnRow

@code{ 
    private int i = 0;
    Dictionary<string, object> onRow(RowData<月結明細查詢> row) => new()
    {
        ["style"] = i++ % 2==0? "background-color: aliceblue" : "background-color: white"
    };
}      

後來在最新的文檔示例中，我找到了一個更合适的處理方法，設定 RowClassName 屬性

<Table @ref="table" RowClassName="@(x =>{ i=1-i; return i==0?"evenrow":""; })"

</Table>
<style>
.evenrow
    {
        background-color: #fff1f0;
    }    
</style>
@code{
    int i=0;   
}      

上面的代碼，在分頁的 PageSize 為奇數時，每次翻頁後的初始行背景不固定，可以結合 OnPageIndexChange="()=> i=0" 在翻頁時重置 i

另外運作發現，當Table 的分頁數超過10以後，會自動出現指定每頁記錄數的下拉框（這個特性好像文檔裡沒有提到）