社区首页 >专栏 >一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库

追逐时光者

发布于 2025-03-02 14:30:19

15600

代码可运行

文章被收录于专栏：编程进阶实战编程进阶实战

运行总次数：0

代码可运行

前言

今天大姚给大家分享一套基于 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" />

组件库使用

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";
            }

        }

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",
                            }
                        }
                    }
                }
            };
        }

Tab

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