?2016-2026 Matools All rights reserved,
粵ICP備17059708號
? 前面學(xué)習(xí)了Blazor的特點(diǎn)、環(huán)境搭建及基礎(chǔ)知識，現(xiàn)在我們嘗試的做個(gè)實(shí)際的組件。
? Ant Design <https://ant.design/index-cn>是螞蟻金服是基于Ant Design設(shè)計(jì)體系的 UI
組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。目前官方是基于React和Angular實(shí)現(xiàn)的，今年也推出了Vue的實(shí)現(xiàn)。其組件涵蓋面較廣，其組件風(fēng)格及交互效果還是比較驚艷的，后面準(zhǔn)備利用Ant
Design的樣式文件利用Blazor模仿幾個(gè)組件的實(shí)現(xiàn)。
? 由于也是新學(xué)的Blazor開發(fā)，可能實(shí)現(xiàn)的方式有些笨拙，希望高手提出寶貴意見，先看看實(shí)現(xiàn)的Button 按鈕、Grid 柵格、導(dǎo)航欄的效果。
?先來看看Button按鈕，它支持多種風(fēng)格，是否只顯示圖標(biāo)，loading狀態(tài)等。實(shí)現(xiàn)步驟及主要代碼且聽我娓娓道來，
?1、引用樣式文件
? 首先去antd.css cdn <https://www.bootcdn.cn/antd/> 下載穩(wěn)定版的css文件，放到?wwwroot 文件夾下。再
_Host.cshtml 引用該文件。
2、建立?AButtonBase 類
? AButtonBase類定義了按鈕的屬性參數(shù)；注冊了class名稱（例如：class="ant-btn
ant-btn-primary"）的計(jì)算表達(dá)式，class內(nèi)容是根據(jù)屬性參數(shù)的設(shè)置情況計(jì)算出來的。
? 屬性set 的?ClassMapper.Dirty() 是通知樣式名生成方法屬性改變了需要重新生成樣式名稱。
?
而ClassMapper是用于注冊組件需要用到的樣式構(gòu)建類，PrefixCls（）是添加樣式共用的前綴，Add有多個(gè)重載，可以是直接的樣式名稱；也可以是根據(jù)第一個(gè)參數(shù)的bool表達(dá)式來確定，第二個(gè)參數(shù)的樣式是否啟用。
?
using BlazorAntDesign.Core; using Microsoft.AspNetCore.Components; using
Microsoft.AspNetCore.Components.RenderTree;using System; using
System.Collections.Generic;using System.Linq; using System.Threading.Tasks;
namespace BlazorAntDesign.General { public class AButtonBase : BaseComponent {
#region Properties /// <summary> /// 設(shè)置按鈕大小，可選值為 Small、Large 或者不設(shè) /// </summary>
[Parameter]protected AButtonSizes ButtonSize { get => buttonSize; set {
buttonSize= value; ClassMapper.Dirty(); } } private AButtonSizes buttonSize =
AButtonSizes.Default;/// <summary> /// 設(shè)置按鈕類型，可選值為 Primary、Dashed、Danger 或者不設(shè)
/// </summary> [Parameter] protected AButtonTypes ButtonType { get =>
buttonType;set { buttonType = value; ClassMapper.Dirty(); } } private
AButtonTypes buttonType = AButtonTypes.Default; /// <summary> /// 設(shè)置按鈕形狀，可選值為
Circle、 Round 或者不設(shè)/// </summary> [Parameter] protected AButtonShapes
ButtonShape {get => buttonShape; set { buttonShape = value;
ClassMapper.Dirty(); } }private AButtonShapes buttonShape =
AButtonShapes.Default;/// <summary> /// 設(shè)置 button 原生的 type 值，可選值請參考 HTML 標(biāo)準(zhǔn) ///
</summary> [Parameter] protected AButtonHTMLTypes HtmlType { get; set; } =
AButtonHTMLTypes.Button;/// <summary> /// 按鈕標(biāo)題 /// </summary> [Parameter]
protected string Title { get => title; set { title = value;
ClassMapper.Dirty(); } }private string title; /// <summary> /// 設(shè)置按鈕的圖標(biāo)名稱 ///
</summary> [Parameter] protected string IconName { get; set; } /// <summary>
/// 將按鈕寬度調(diào)整為其父寬度的選項(xiàng) /// </summary> [Parameter] protected bool Block { get =>
block;set { block = value; ClassMapper.Dirty(); } } private bool block; ///
<summary> /// 幽靈屬性，使按鈕背景透明。幽靈按鈕將按鈕的內(nèi)容反色，背景變?yōu)橥该鳎Ｓ迷谟猩尘吧稀?/// </summary>
[Parameter]protected bool Ghost { get => ghost; set { ghost = value;
ClassMapper.Dirty(); } }private bool ghost; /// <summary> /// 設(shè)置按鈕載入狀態(tài) ///
</summary> [Parameter] protected bool Loading { get => loading; set { loading =
value; ClassMapper.Dirty(); } }private bool loading; /// <summary> /// 按鈕失效狀態(tài)
/// </summary> [Parameter] protected bool Disabled { get; set; } [Parameter]
protected RenderFragment ChildContent { get; set; } /// <summary> /// 點(diǎn)擊按鈕時(shí)的回調(diào)
/// </summary> [Parameter] public EventCallback<UIMouseEventArgs> OnClick { get
;set; } //protected System.Action Clicked { get; set; } protected bool
click_animating {get; set; } #endregion protected override void
RegisterClasses() { ClassMapper.PrefixCls("ant-btn") .Add(() =>
ClassMapper.GetEnumName(buttonSize)) .Add(()=>
ClassMapper.GetEnumName(buttonType)) .Add(()=>
ClassMapper.GetEnumName(buttonShape)) .Add(()=> Block, () => "block") .Add(()
=> Ghost, () =>"background-ghost") .Add(() => Loading, () => "loading") .Add(()
=>string.IsNullOrEmpty(title) && ChildContent == null, () => "icon-only"); base
.RegisterClasses(); }protected void buttonDown() { click_animating = false; }
protected void buttonUp() { click_animating = true; } } }
?AButtonSizes、AButtonTypes、AButtonShapes、AButtonHTMLTypes 屬性參數(shù)是定義的枚舉，例如：
namespace BlazorAntDesign.General { /// <summary> /// 按鈕尺寸選項(xiàng) /// </summary>
public enum AButtonSizes { /// <summary> /// 缺省，中 /// </summary> [ClassNamePart(
"")] Default, /// <summary> /// 大 /// </summary> [ClassNamePart("lg")] Large,
/// <summary> /// 小 /// </summary> [ClassNamePart("sm")] Small } }
?
namespace BlazorAntDesign.General { /// <summary> /// 按鈕類型選項(xiàng) /// </summary>
public enum AButtonTypes { /// <summary> /// 缺省，次按鈕 /// </summary>
[ClassNamePart("")] Default, /// <summary> /// 主按鈕 /// </summary> Primary, ///
<summary> /// /// </summary> Ghost, /// <summary> /// 虛線按鈕 /// </summary>
Dashed,
Danger } }
? ?? AButtonBase類繼承自自定義的BaseComponent，BaseComponent繼承自Blazor的ComponentBase類。
??BaseComponent主要定義了所有組件共用的屬性，ElementId、Style、ClassMapper等，
using System; using System.Collections.Generic; using System.Linq; using
System.Threading.Tasks;using Microsoft.AspNetCore.Components; namespace
BlazorAntDesign.Core {public abstract class BaseComponent : ComponentBase,
IDisposable {#region Members private bool disposed; private ElementRef
elementRef;#endregion #region Constructors public BaseComponent() { ElementId =
Utils.IDGenerator.Instance.Generate; ClassMapper= new ClassMapper();
RegisterClasses(); }#endregion #region Methods protected virtual void
RegisterClasses() { ClassMapper.AddCustomClass(()=> customClass); } public void
Dispose() { Dispose(true); GC.SuppressFinalize(this); } protected virtual void
Dispose(bool disposing) { if (!disposed) { if (disposing) { if (ClassMapper !=
null) { //ClassMapper.Dispose(); ClassMapper = null; } } disposed = true; } }
#endregion #region Properties /// <summary> /// 定義用戶自定義的 ClassName ///
</summary> [Parameter] protected string ClassName { get => customClass; set {
customClass= value; ClassMapper.Dirty(); } } private string customClass; ///
<summary> /// Gets the reference to the rendered element. /// </summary> public
ElementRef ElementRef {get => elementRef; protected set => elementRef = value; }
/// <summary> /// 獲取 element 唯一 Id. /// </summary> public string ElementId { get
; } [Parameter]protected string Style { get; set; } /// <summary> /// 獲取
ClassMapper./// </summary> protected ClassMapper ClassMapper { get; private set
; }#endregion } }
?
3、建立 AButton.razor
@inherits BlazorAntDesign.General.AButtonBase <button class
="@ClassMapper.Class" type="@(Enum.GetName(typeof(AButtonHTMLTypes),
HtmlType).ToLower())" ant-click-animating-without-extra-node="@(click_animating
? "true" : "")" disabled="@Disabled" @onkeydown="@buttonDown" @onmousedown
="@buttonDown" @onkeyup="@buttonUp" @onmouseup="@buttonUp" @onclick="@OnClick">
@*圖標(biāo)*@ @if (Loading) {<AIcon IconName="loading"></AIcon>} else { if
(!string.IsNullOrEmpty(IconName)) {<AIcon IconName="@IconName"></AIcon>} }
@*標(biāo)題*@ @if (!string.IsNullOrEmpty(Title)) {<span>@Title</span>} @*子內(nèi)容*@
@ChildContent</button>
? 其中 ?@inherits BlazorAntDesign.General.AButtonBase
是代碼隱藏方式，指定后臺代碼繼承自AButtonBase類，button class="@ClassMapper.Class"
，將采用的樣式根據(jù)指定的屬性值計(jì)算出來賦值給button的class屬性。下面根據(jù)屬性設(shè)置判斷是否顯示圖標(biāo)、標(biāo)題、子內(nèi)容。
4、使用 AButton
?建立DemoButton.razor文件，樣例代碼如下：
?
@page "/DemoButton" @using BlazorAntDesign.General; <div style="border:1px
solid beige;padding:10px"> <AButton Title="Default"></AButton> <AButton Title
="Primary" ButtonType="AButtonTypes.Primary"></AButton> <AButton Title="Danger"
ButtonType="AButtonTypes.Danger"></AButton> <AButton Title="Dashed" ButtonType
="AButtonTypes.Dashed"></AButton> <AButton Title="Disabled" Disabled="true"></
AButton> <AButton ButtonType="AButtonTypes.Primary" IconName="download"
ButtonShape="AButtonShapes.Circle"></AButton> <AButton Title="下載" ButtonType
="AButtonTypes.Primary" IconName="download" ButtonShape="AButtonShapes.Round"></
AButton> <AButton Title="下載" ButtonType="AButtonTypes.Primary" IconName
="download"></AButton> <AButtonGroup><AButton ButtonType="AButtonTypes.Primary"
IconName="left">Backward</AButton><AButton ButtonType="AButtonTypes.Primary">
Forward<AIcon IconName="right" /></AButton></AButtonGroup> <AButton Title
="Loading" ButtonType="AButtonTypes.Primary" Loading="true"></AButton> <AButton
Title="Click me!" ButtonType="AButtonTypes.Primary" Loading="@isLoading" OnClick
="@(()=> { isLoading = true; })"></AButton> </div> <div style="border:1px solid
beige;padding:10px;margin-top:5px"> <AButton IconName="search" ButtonType
="AButtonTypes.Primary" ButtonShape="AButtonShapes.Circle"></AButton> <AButton
IconName="search" ButtonType="AButtonTypes.Primary">按鈕</AButton> <AButton
IconName="search" ButtonShape="AButtonShapes.Circle"></AButton> <AButton
IconName="search">按鈕</AButton> <AButton IconName="search" ButtonType
="AButtonTypes.Dashed" ButtonShape="AButtonShapes.Circle"></AButton> <AButton
IconName="search" ButtonType="AButtonTypes.Primary">按鈕</AButton> </div> @code{
private bool isLoading = false; private void LoadingClick() { isLoading = true;
} }
?
@page "/DemoButton" ? 為組件路由
@using BlazorAntDesign.General; ? ? ? 為應(yīng)用組件命名空間
?
?? 好了Button的實(shí)現(xiàn)思路今天就學(xué)習(xí)到這了，希望有興趣的同仁共同學(xué)習(xí)探討，讓Blazor真正走向SPA開發(fā)的舞臺，讓.net
core七龍珠面向全棧開發(fā)，更好的擁抱社區(qū)，刷新業(yè)界對.net體系的認(rèn)知。
?
?? 番 ? 外 ? 篇 ??
?? Blazor 在發(fā)展：
? 微軟已將 Blazor 移出了實(shí)驗(yàn)階段，進(jìn)入了官方預(yù)覽版。使用組件模型進(jìn)行服務(wù)器端渲染的 Blazor 版本將與.NET Core 3
的最終版本一起發(fā)布（請參閱.NET Core 路線圖
<https://github.com/dotnet/core/blob/master/roadmap.md>
），客戶端版本將在隨后不久發(fā)布。還有工作要完成：調(diào)試體驗(yàn)極其有限，必須改進(jìn)；有機(jī)會(huì)通過提前編譯生成本機(jī) Wasm
來優(yōu)化代碼性能；在將未使用的代碼庫發(fā)送到瀏覽器之前，需要從庫中刪除未使用的代碼，從而降低總體大?。ㄟ@個(gè)過程稱為樹抖動(dòng)）。對 WebAsssembly
的興趣和采用與日俱增，借助 Blazor，編寫可以在任何地方運(yùn)行的 C#和.NET 代碼的夢想終于實(shí)現(xiàn)了。
? .net core將踏上新的征程：
? <https://devblogs.microsoft.com/dotnet/introducing-net-5/>
?
熱門工具 換一換