尝试使用MatBlazor，这是Blazor的UI框架


总览

以前，我介绍过Radzen.Blazor作为Blazor的UI框架。
(请参见)

有MatBlazor作为具有其他主要功能的UI框架，因此我想对其进行介绍。

本文演示
源代码

假设条件

.NET Core SDK 3.1.100-preview3-014645
Microsoft.AspNetCore.Blazor 3.1.0-preview2.19528.8
Visual Studio 2019
MatBlazor 1.10.1

安装步骤

为Blazor的WebAssembly App版本创建一个项目，
从Nuget安装MatBlazor。
mat1.PNG

添加对

_Imports.razor的引用。
(@使用MatBlazor)

如果不使用Visual Studio GUI，则可以使用以下命令之一添加它。
安装包MatBlazor
dotnet添加软件包MatBlazor

组件介绍

我将介绍一些组件。

布局网格

通过以与Bootstrap相同的方式指定列数来实现响应式设计。
一行中的列数对于台式机为12，对于平板电脑为8，对于智能手机为4。
垫板布局网格→垫板网格内部→垫板网格单元
我将以嵌套形式描述它。
对于"单元格"，指定跨度占用的列数。
您可以通过在Cell中添加inner来通过嵌套进一步划分列。

网格剃刀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="mat-layout-grid">
    <div class="mat-layout-grid-inner">
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12 ">
            <h3 align="center">Grid</h3>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <h3 class="grid-sample">Span3</h3>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <h3 class="grid-sample">Span3</h3>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <h3 class="grid-sample">Span3</h3>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <h3 class="grid-sample">Span3</h3>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-8 grid-sample">
            <div class="mat-layout-grid-inner">
                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-6 ">
                    <h3 class="grid-sample">Span6</h3>
                </div>
                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-6 ">
                    <h3 class="grid-sample">Span6</h3>
                </div>
            </div>
        </div>
    </div>
</div>

在上述
-四列，宽度为3
-宽度为8的列中的宽度为6的两列
被放置。

显示图像如下。

grid.PNG

Appbar和MatMenu

您可以实现经常在网站上看到的应用程序菜单。

appbar1.PNG

appbar20.png

Appbar.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<MatAppBarContainer>
    <MatAppBar Fixed="true">
        <MatAppBarRow>
            <MatAppBarSection>
                <MatIconButton Icon="menu" OnClick="@OnClickMenu" @ref="Button"></MatIconButton>
                <MatMenu @ref="Menu">
                    <MatList>
                        <MatListItem OnClick="@(e => OnSelectMenu("Item1"))">Item 1</MatListItem>
                        <MatListItem OnClick="@(e => OnSelectMenu("Item2"))">Item 2</MatListItem>
                        <MatListItem OnClick="@(e => OnSelectMenu("Item3"))">Item 3</MatListItem>
                        <MatListItem OnClick="@(e => OnSelectMenu("Item4"))">Item 4</MatListItem>
                        <MatListItem OnClick="@(e => OnSelectMenu("Item5"))">Item 5</MatListItem>
                    </MatList>
                </MatMenu>
                <MatAppBarTitle>AppBarTest</MatAppBarTitle>
            </MatAppBarSection>
            <MatAppBarSection Align="@MatAppBarSectionAlign.End">
                <MatIconButton Icon="favorite"></MatIconButton>
            </MatAppBarSection>
        </MatAppBarRow>
    </MatAppBar>

    <MatAppBarContent>
        @content
    </MatAppBarContent>
</MatAppBarContainer>

@code {
    MatIconButton Button;
    BaseMatMenu Menu;
    private string content = "content";

    public void OnClickMenu(MouseEventArgs e)
    {
        this.Menu.OpenAsync(Button.Ref);
    }

    public void OnSelectMenu(string content)
    {
        this.content = content;
    }
}

MatAppBarContainer→MatAppBar→MatAppBarRow(行)→MatAppBarSection(区域)→MatAppBarTitle(标题)
创建一个这样的区域。
MatAppBarSection具有Align属性，因此您可以创建多个节并将内容放置在左右两侧。
(但是，我不确定这是否只是我的环境，但是我删除了它，因为放置MatAppBarContainer时有时布局无法正常工作。即使删除了它，到目前为止也没有任何不便之处。)

接下来是菜单显示。
-在ref中保留MatMenu的实例引用
-调用OpenAsync方法
这将弹出一个下拉菜单。

通过单击按钮开始使用MatIconButton调用此菜单，从而显示菜单。

MatDialog

这是一个经常使用的对话框。

dialog.PNG

Dialog.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="mat-layout-grid">
    <div class="mat-layout-grid-inner">
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <MatButton OnClick="@(e => { okCancelDialogIsOpen = true; })">OKCancel Dialog</MatButton>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12 ">
            @result
        </div>
    </div>
</div>
<!-- ok cancel dialog -->
<MatDialog @bind-IsOpen="@okCancelDialogIsOpen" CanBeClosed="false">
    <MatDialogTitle>Title</MatDialogTitle>
    <MatDialogContent>
        <p>Message</p>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(e => { okCancelDialogIsOpen = false; result = "OK"; })">OK</MatButton>
        <MatButton OnClick="@(e => { okCancelDialogIsOpen = false; result = "Cancel"; })">Cancel</MatButton>
    </MatDialogActions>
</MatDialog>

@code {
    string result = string.Empty;
    bool okCancelDialogIsOpen = false;
}

在

页面元素内创建MatDialog标签，然后切换bind-IsOpen以显示或隐藏它。
分别定义和使用标题(MatDialogTitle)，内容(MatDialogContent)和底部按钮(MatDialogActions)的布局。
使用CanBeClosedpu属性，可以通过单击屏幕外部来设置是否关闭。

另外，可以将"确定"和"取消"之类的标准对话框用作组件，如下所示。

OKCandelDialog.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<MatDialog @bind-IsOpen="@IsDialogOpen" CanBeClosed="false">
    <MatDialogTitle>@Title</MatDialogTitle>
    <MatDialogContent>
        <p>@Message</p>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(e => { OnClick(true); })">OK</MatButton>
        <MatButton OnClick="@(e => { OnClick(false); })">Cancel</MatButton>
    </MatDialogActions>
</MatDialog>

@code {

    [Parameter]
    public bool IsDialogOpen { get; set; }
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public string Message { get; set; }
    [Parameter]
    public EventCallback<bool> ButtonAction { get; set; }

    void OnClick(bool result)
    {
        ButtonAction.InvokeAsync(result);
    }
}

使用

组件的一面如下。

OKCandelDialog.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mat-layout-grid">
    <div class="mat-layout-grid-inner">
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3 ">
            <MatButton OnClick="@(e => { customDialogIsOpen = true; })">Custom Dialog</MatButton>
        </div>
        <div class="mat-layout-grid-cell mat-layout-grid-cell-span-12 ">
            @result
        </div>
    </div>
</div>
<!-- component dialog -->
<OKCancelDialog IsDialogOpen="@customDialogIsOpen" Title="Test" Message="メッセージ"
                ButtonAction="@(e => { customDialogIsOpen = false;  result = e.ToString(); })" />
@code {
    string result = string.Empty;
    bool customDialogIsOpen = false;
}

垫表

表的组件。

table.PNG

剃刀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<MatTable Items="@PersonList" AllowSelection="true" Striped="true">
    <MatTableHeader>
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
    </MatTableHeader>
    <MatTableRow>
        <td>@context.Name</td>
        <td>@context.Age</td>
        <td>@context.Job</td>
    </MatTableRow>
</MatTable>

@code {
    class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }

        public string Job { get; set; }
    }

    List<Person> PersonList;

    protected override void OnInitialized()
    {
        PersonList = new List<Person>();
        PersonList.Add(new Person() { Name = "A", Age = 40, Job = "社長" });
        PersonList.Add(new Person() { Name = "B", Age = 23, Job = "NEET" });
        PersonList.Add(new Person() { Name = "C", Age = 34, Job = "エンジニア" });
        PersonList.Add(new Person() { Name = "D", Age = 50, Job = "隠居" });
    }
}

将

集合绑定到Items，然后在MatTableHeader中指定标题名称以及要在MatTableRow中显示的属性。 (@ context。属性)
如果您是.NET工程师，则希望它像DataGrid一样被使用，但是
您可以使用AllowSelection属性选择行，但不幸的是，我找不到获取所选元素的方法。

MatFAB

您可以添加一个在最近的网站上经常看到的浮动操作按钮。

fab.PNG

剃刀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .app-fab--absolute {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
    }
</style>
<div class="mat-layout-grid">
    // 略
    <MatFAB Class="app-fab--absolute" Icon="@Icon" Label="@Label"></MatFAB>
</div>

@code {
    string Icon = MatIconNames.Favorite;
　　//String.Emptyだと余計なスペースが入る
    string Label = null;
}

在屏幕右下角显示的方法是在样式表中指定的，而不是在属性中指定的。
(也可以用剃刀描述。这次是app-fab--absolute)

字符也可以使用

Label属性显示，但是String.Empty将添加额外的空间，因此，如果要动态切换显示，请将其设置为null。

可以为

Icon属性指定SPA UI框架中熟悉的Material Icon。
您可以在下面的MatIconNames中看到定义的图标的图像。
https://samprof.github.io/MatBlazor/Icon

在频繁使用的情况下，我认为它用于在滚动屏幕时显示按钮，但是除非与Javascript链接，否则似乎很难，因此我想在不久的将来单独进行研究和介绍。
(与Vue和React之类的SPA框架不同，不能按原样使用JS。)

其他组件

可以使用TextBox，CheckBox，DatePicker，RadioButton，Select和其他常用输入组件。
有关详细信息，请访问官方网站。
https://samprof.github.io/MatBlazor/

摘要

我们介绍了MatBlazor作为Blazor的UI框架。
与Radzen.Blazor相比，它具有较少的组件数量，但我发现它易于使用，因为它具有有关各个功能的文档。
它仍在开发中，因此我希望在将来能看到它。

参考

Mat Blazor官方网站

本文演示
源代码

其他Blazor帖子

我写了一些有关Blazor的文章，因此，如果您愿意，请看一下。

  • 更改Blazor的初始加载屏幕(正在加载)
  • 未使用Blazor登录时重定向到登录页面
  • 使用Blazor在代码隐藏中分离逻辑和视图
  • 尝试使用Radzen.Blazor，这是Blazor的UI框架
  • 在GitHub Pages上发布使用Blazor创建的网站
  • 在Firebase上发布使用Blazor创建的网站