blazor小白笔记02-第三方UI控架

使用blazor自带的项目模版总感觉差点什么，像这种一般都会有第三方的UI库，感觉Bootstrap Blazor就不错，那就使用它吧，Bootstrap很贴心的提供了项目模板，下载安装就可以直接使用了，打开https://www.blazor.zone/template，点击传送门进行下载

下载完成后进行安装，安装好以后打开Visual Studio 2022，选择创建新项目，根据自己的需要选择，我这里选择的是server-side

新建完成后点击运行就可以看到效果了，界面确实很美，但是咱们现在还写不出来，只能按照网站的例子一点一点的学习了。

其中左侧的菜单栏是在MainLayout.razor.cs文件中，下面的部分就是菜单，可以按需修改

private static List<MenuItem> GetIconSideMenuItems()
{
    var menus = new List<MenuItem>
    {
        new() { Text = "Index", Icon = "fa-solid fa-fw fa-flag", Url = "/" , Match = NavLinkMatch.All},
        new() { Text = "Demo例子", Icon = "fa-solid fa-fw fa-check-square", Url = "/Demo1" },
        new() { Text = "Weather", Icon = "fa-solid fa-fw fa-database", Url = "/weather" },
        new() { Text = "Table", Icon = "fa-solid fa-fw fa-table", Url = "/table" },
        //new() { Text = "花名册", Icon = "fa-solid fa-fw fa-users", Url = "/users" }
    };

    return menus;
}

然后新建一个Demo1组件，用来进行学习练习

@page "/Demo1"
@attribute [TabItemOption(Text = "测试")]
<PageTitle>分割线测试</PageTitle>

<h4>Demo例子，分割线</h4>
<Divider Text="华丽丽的分割线"></Divider>
<h4>Demo例子，分割线</h4>

<Divider Text="可拖动项例子一，初始化时绑定数据"></Divider>
<div>
	<Row ItemsPerRow="ItemsPerRow.Two">
		<Dropzone TItem="string" Items="@L1">
			<Card IsShadow="true">
				<BodyTemplate>
					@context
				</BodyTemplate>
			</Card>
		</Dropzone>
		<Dropzone TItem="string" Items="@L2">
			<Card IsShadow="true">
				<BodyTemplate>
					@context
				</BodyTemplate>
			</Card>
		</Dropzone>
	</Row>
</div>
<Divider Text="可拖动项例子二，在UI上赋值"></Divider>
<div>
	<Row ItemsPerRow="ItemsPerRow.Two">
		<Dropzone TItem="string" Items='["999","777","888" ]'>
			<Card IsShadow="true">
				<BodyTemplate>
					@context
				</BodyTemplate>
			</Card>
		</Dropzone>
		<Dropzone TItem="string" Items='["山西", "湖北", "888"]'>
			<Card IsShadow="true">
				<BodyTemplate>
					@context
				</BodyTemplate>
			</Card>
		</Dropzone>
	</Row>
</div>
@code {
	private	List<string> L1 = new List<string>();
	private List<string> L2 = new List<string>();
	protected override void OnInitialized()
	{

		L1=["999","777","888" ];
		L2 = ["山西", "湖北", "888"];
	}

}

先从最简单的开始吧，前端UI其实就是一个熟悉的过程，另外还需要练习一下lambda表达式，基本上现在都是用它写的代码。

#职场##挑战30天在头条写日记##冬日生活打卡季#