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

360影视 动漫周边 2025-05-20 08:40 3

摘要:引入 CSS 文件在(Blazor WebAssembly)或_Host.cshtml(Blazor Server)中添加以下代码:

Blazorise 是一个专门为 Blazor 框架设计的 UI 组件库。

它最大的特点是不依赖特定 CSS 框架,而是通过 C# 实现组件逻辑。

你可以自由选择使用 Bootstrap、Tailwind、Material 等样式框架。

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 文件在(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

相关推荐