blazor小白笔记02-第三方UI控架（骆驼祥子读书笔记）
文章标签：
bootstrap 搜索框
使用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表达式，基本上现在都是用它写的代码。