一套基于 Material Design 規范實現的 Blazor 和 Razor 通用組件庫

作者：大姚 2025-02-27 10:25:35

今天給大家分享一套基于 Material Design 規范實現的、開源（MIT license）且免費的 Blazor 和 Razor 通用組件庫：MatBlazor。

今天大姚給大家分享一套基于 Material Design 規范實現的、開源（MIT license）且免費的 Blazor 和 Razor 通用組件庫：MatBlazor。

Blazor介紹

Blazor 是基于 HTML、CSS 和 C# 的現代前端 Web 框架，可幫助你更快地生成 Web 應用。使用 Blazor，你可以使用可從客戶端和服務器運行的可重用組件生成 Web 應用，以便提供出色的 Web 體驗。

組件庫安裝

命令安裝：

Install-Package MatBlazor

或者：

dotnet add package MatBlazor

NuGet包管理器安裝：

腳本引入

對于客戶端和服務器端的Blazor項目需要將腳本部分添加到 index.html 或 _Host.cshtml（head 部分）。

<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

組件庫使用

(1) Button：

<MatButton OnClick="@Click">Text @ButtonState</MatButton>
        <MatButton Raised="true">Raised</MatButton>
        <MatButton Unelevated="true">Unelevated</MatButton>
        <MatButton Outlined="true">Outlined</MatButton>
        <MatButton Dense="true">Dense</MatButton>

        @code
        {
            string ButtonState = "";

            void Click(MouseEventArgs e)
            {
                ButtonState = "Clicked";
            }

        }

(2) TreeView：

<MatTreeView TNode="TreeNodeModel"
                     RootNode="@MyRootNode"
                     GetChildNodesCallback="@((n)=>n.Nodes)">
            <NodeTemplate>
                @context.Name
            </NodeTemplate>
        </MatTreeView>

        @code
        {
            class TreeNodeModel
            {
                public string Name { get; set; }
                public TreeNodeModel[] Nodes { get; set; } = new TreeNodeModel[0];
            }

            TreeNodeModel MyRootNode = new TreeNodeModel()
            {
                Name = "Book",
                Nodes = new TreeNodeModel[] {
                    new TreeNodeModel(){
                        Name = "Chapter 1",
                        Nodes = new TreeNodeModel[] {
                            new TreeNodeModel(){
                                Name = "Heading",
                            },
                            new TreeNodeModel(){
                                Name = "Content",
                            }
                        }
                    },
                    new TreeNodeModel(){
                        Name = "Chapter 2",
                        Nodes = new TreeNodeModel[] {
                            new TreeNodeModel(){
                                Name = "Heading",
                            },
                            new TreeNodeModel(){
                                Name = "Content",
                            }
                        }
                    },
                    new TreeNodeModel(){
                        Name = "Chapter 3",
                        Nodes = new TreeNodeModel[] {
                            new TreeNodeModel(){
                                Name = "Heading",
                            },
                            new TreeNodeModel(){
                                Name = "Content",
                            }
                        }
                    }
                }
            };
        }

(3) Tab：

<MatTabGroup>
            <MatTab Label="First">
                First Content
            </MatTab>
            <MatTab Label="Second">
                Second Content
            </MatTab>
            <MatTab>
                <LabelContent>
                    Third <MatIcon Icnotallow="@MatIconNames.Close"></MatIcon>
                </LabelContent>
                <ChildContent>
                    Third Content
                </ChildContent>
            </MatTab>

        </MatTabGroup>