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>

 

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以後，會自動出現指定每頁記錄數的下拉框（這個特性好像文檔裏沒有提到）

 

 

 

 

 

10. Model 對話框隱藏取消按鈕，我還沒有找到好辦法，目前是設置 CancelText="@string.Empty" 變相達到目的