BulmaRazor 组件库

English | 中文

项目介绍（仅供学习）

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

• 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
• 共享使用 .NET 编写的服务器端和客户端应用逻辑。
• 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

• 使用 C# 代替 JavaScript 来编写代码。
• 利用现有的 .NET 生态系统。
• 在服务器和客户端之间共享应用逻辑。
• 受益于 .NET 的性能、可靠性和安全性。
• 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 支持 Net5
• 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

本项目是利用 Bulma 样式进行封装的 UI 组件库

安装

通过nuget引入BulmaRazor包

Install-Package BulmaRazor

用法

• 在Startup中添加服务

  services.AddBulmaRazor();
  
• _Host.cshtml或者index.html中引入样式和脚本

  <!--bulma.min.css可以使用自定义皮肤替换-->
  <link href="_content/BulmaRazor/bulma.min.css" rel="stylesheet"/>
  <link href="_content/BulmaRazor/bulmarazor.min.css" rel="stylesheet" />
  <script src="_content/BulmaRazor/bulmarazor.min.js"></script>
  
• 在_Imports.razor中导入名称空间

  @using BulmaRazor.Components
  
• 开始使用,组件元素名对应Bulma.css中的类名

  <Button Color="Color.Primary">Click</Button>
  

QQ交流群

组件

Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。

组件是内置到 .NET 程序集的 .NET 类，用来：

• 定义灵活的 UI 呈现逻辑。
• 处理用户事件。
• 可以嵌套和重用。
• 可以作为 Razor 类库或 NuGet 包共享和分发。

内置组件 传送门

分支说明

• master 稳定分支
• dev 开发功能分支
• 其他 均为临时分支

演示地址

项目截图

开源协议

参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

捐助

如果这个项目对您有所帮助，请扫下方二维码打赏一杯咖啡。

相关资源

• Bulma官网
• Blazor微软文档

相关引用

• foundation-datepicker
• jscolor
• bulma-checkradio
• bulma-collapsible
• bulma-badge
• bulma-divider
• bulma-pageloader
• bulma-quickview
• bulma-carousel
• bulma-ribbon
• bulma-switch
• bulma-timeline
• bulma-slider
• bulma-tooltip
• bulma-o-steps
• bulma-tagsinput