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 框架：

• • Blazorise.Tailwind
• • Blazorise.Bootstrap
• • Blazorise.Bootstrap5
• • Blazorise.Bulma
• • Blazorise.Material
• • Blazorise.AntDesign
• • 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 提供了多个在线演示，方便你查看不同框架下的效果：

• • 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 Documentation

✅ 总结

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

现在就去试试吧！🚀

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