Blazorise:Blazor 跨 CSS 框架 UI 解决方案_技术教程

Blazorise 是一个专门为 Blazor 框架设计的 UI 组件库。
它最大的特点是不依赖特定 CSS 框架，而是通过 C# 实现组件逻辑。
你可以自由选择使用 Bootstrap、Tailwind、Material 等样式框架。

安装方式

你可以通过 NuGet 安装 Blazorise：

dotnet add package Blazorise.Bootstrap5
dotnet add package Blazorise.Icons.FontAwesome

目前支持以下 CSS 框架：

o Blazorise.Tailwind
o Blazorise.Bootstrap
o Blazorise.Bootstrap5
o Blazorise.Bulma
o Blazorise.Material
o Blazorise.AntDesign
o Blazorise.FluentUI2

配置步骤

1. 引入 CSS 文件

在 index.html（Blazor WebAssembly）或 _Host.cshtml（Blazor Server）中添加以下代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css?v=1.7.6.0" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=1.7.6.0" rel="stylesheet" />

2. 注册服务

在 Program.cs 中注册 Blazorise：

using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;

builder.Services
 .AddBlazorise()
 .AddBootstrap5Providers()
 .AddFontAwesomeIcons();

3. 添加命名空间引用

在 _Imports.razor 文件中添加：

@using Blazorise

使用示例

下面是一个简单的按钮和计数器组件示例：

@page "/counter"

<Heading Size="HeadingSize.Is1">Counter</Heading>

<Paragraph>Current count: @currentCount</Paragraph>

<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
 int currentCount = 0;

 void IncrementCount()
 {
 currentCount++;
 }
}

支持的演示项目

Blazorise 提供了多个在线演示，方便你查看不同框架下的效果：

o Tailwind Demo
o Bootstrap 4 Demo
o Bootstrap 5 Demo
o Material Demo
o Bulma Demo
o AntDesign Demo
o Fluent 2 Demo

截图

....更多查看在线预览

商业用途

它本身是开源的，免费提供给开发者使用。Blazorise 也提供了商业支持选项，包括专业版和企业版订阅。

Blazorise 提供商业订阅计划，包含以下优势：

o 访问专属主题和组件库（Themes，Blocks）
o 优先获得技术支持（响应时间 24 小时或更短）
o 优先修复问题和新增功能请求
o 专属论坛支持 Support Forum

部分功能可能仅限特定订阅等级。

文档资源

完整的文档和组件说明，请访问官方文档页面：
Blazorise Documentation

总结

Blazorise 是一个灵活、强大的 Blazor 组件库。
它支持多种 CSS 框架，并提供丰富的组件和主题。
无论你是做个人项目还是企业级应用，都可以轻松集成 Blazorise 来提升开发效率。

现在就去试试吧！

GitHub 地址：https://github.com/Megabit/Blazorise

Blazorise:Blazor 跨 CSS 框架 UI 解决方案