摘要:引入 CSS 文件在(Blazor WebAssembly)或_Host.cshtml(Blazor Server)中添加以下代码:
Blazorise 是一个专门为 Blazor 框架设计的 UI 组件库。
它最大的特点是不依赖特定 CSS 框架,而是通过 C# 实现组件逻辑。
你可以自由选择使用 Bootstrap、Tailwind、Material 等样式框架。
dotnet add package Blazorise.Bootstrap5dotnet add package Blazorise.Icons.FontAwesome
目前支持以下 CSS 框架:
• Blazorise.Tailwind
• Blazorise.Bootstrap
• Blazorise.Bootstrap5
• Blazorise.Bulma
• Blazorise.Material
• Blazorise.AntDesign
• Blazorise.FluentUI2
1. 引入 CSS 文件在(Blazor WebAssembly)或_Host.cshtml(Blazor Server)中添加以下代码:linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet">linkhref="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css"rel="stylesheet">
linkhref="_content/Blazorise/blazorise.css?v=1.7.6.0"rel="stylesheet" />
linkhref="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=1.7.6.0"rel="stylesheet" />2. 注册服务在Program.cs中注册 Blazorise:usingBlazorise;
usingBlazorise.Bootstrap5;
usingBlazorise.Icons.FontAwesome;
builder.Services
.AddBlazorise
.AddBootstrap5Providers
.AddFontAwesomeIcons;3. 添加命名空间引用在_Imports.razor文件中添加:
下面是一个简单的按钮和计数器组件示例:
@page "/counter"Counter
Current count: @currentCount
Click me
@code {
int currentCount = 0;
void IncrementCount
{
currentCount++;
}
}
Blazorise 提供了多个在线演示,方便你查看不同框架下的效果:
• Tailwind Demo
• Bootstrap 4 Demo
• Bootstrap 5 Demo
• Material Demo
• Bulma Demo
• AntDesign Demo
• Fluent 2 Demo
....更多查看在线预览
它本身是开源的,免费提供给开发者使用。Blazorise 也提供了商业支持选项,包括专业版和企业版订阅。
Blazorise 提供商业订阅计划,包含以下优势:
• 访问专属主题和组件库(Themes,Blocks)
• 优先获得技术支持(响应时间 24 小时或更短)
• 优先修复问题和新增功能请求
• 专属论坛支持 Support Forum
部分功能可能仅限特定订阅等级。
Blazorise 是一个灵活、强大的 Blazor 组件库。
它支持多种 CSS 框架,并提供丰富的组件和主题。
无论你是做个人项目还是企业级应用,都可以轻松集成 Blazorise 来提升开发效率。
现在就去试试吧!🚀
GitHub 地址:https://github.com/Megabit/Blazorise
来源:opendotnet