# Blazorise
**Repository Path**: weyhd_geffzhang/Blazorise
## Basic Information
- **Project Name**: Blazorise
- **Description**: Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Bulma, AntDesign and Material. https://blazorise.com/
- **Primary Language**: C#
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 6
- **Forks**: 1
- **Created**: 2020-06-10
- **Last Updated**: 2022-01-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Components for Blazor
[](https://www.nuget.org/profiles/stsrki)
[](https://www.myget.org/gallery/blazorise)
[](https://gitter.im/stsrki/Blazorise?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://join.slack.com/t/blazorise/shared_invite/enQtNzQ2MjQxNDI4MzQxLThjZWM2YjRjMzg1OTlmMWY5NTBlNGRhYmQxOWZhY2Q2ZDcwYjRiMTQzZWZiOTAzMmE5YmNjNzMzYjY5YWRkZjg)
[](LICENSE)
[](https://www.paypal.me/mladenmacanovic)
[](https://www.buymeacoffee.com/mladenmacanovic)
[](https://www.patreon.com/mladenmacanovic)
Blazorise is a component library built on top of [Blazor](https://blazor.net/) and CSS frameworks like Bootstrap, Bulma and Material.
## Demos
### Blazor WebAssembly
- [Bootstrap Demo](https://bootstrapdemo.blazorise.com)
- [Material Demo](https://materialdemo.blazorise.com/)
- [Bulma Demo](https://bulmademo.blazorise.com/)
- [eFrolic Demo](https://efrolicdemo.blazorise.com/)
- [AntDesign Demo](https://antdesigndemo.blazorise.com/)
### Blazor Server
- [Bootstrap Demo](https://rcbootstrapdemo.blazorise.com/)
```
Note: This project is still experimental so it's possible that some components will be removed or refactored.
```
[Releases](https://blazorise.com/docs/releases/) and [Roadmap](https://github.com/stsrki/Blazorise/issues/304)
## Documentation
For full documentation, please visit the [Blazorise official documentation page](https://blazorise.com/docs/).
Continuing reading below for a quick start guide.
## Prerequisites
Before you continue, please make sure you have the latest version of Visual Studio and .Net Core installed. Visit an official [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/client) site to learn more.
## Installations
There are currently 5 different NuGet packages for each of the supported CSS frameworks. Available packages are:
```
- Blazorise.Bootstrap
- Blazorise.Bulma
- Blazorise.Material
- Blazorise.AntDesign
- Blazorise.Frolic
```
This guide will show you how to setup Blazorise with **Bootstrap** and **FontAwesome** icons. To setup Blazorise for other CSS frameworks, please refer the [Usage](https://blazorise.com/docs/usage/) page in the documentation.
### 1. NuGet packages
First step is to install a Bootstrap provider for Blazorise:
```
Install-Package Blazorise.Bootstrap
```
And FontAwesome icon package:
```
Install-Package Blazorise.Icons.FontAwesome
```
### 2. Source files
The next step is to define links to Bootstrap and FontAwesome _CSS_ or _JS_ files. If you're using **Blazor WebAssembly** project template, those links will go to the `index.html` located inside of `wwwroot` folder. Otherwise, if you're using a **Blazor Server** project template you will place the links into the `_Host.cshtml`.
In this step we're also going to define the links for Blazorise content files that comes with NuGet packages. You must follow the naming convention `_content/{LIBRARY.NAME}/{FILE.NAME}`.
```html
```
---
**NOTE**
When Blazor project is created it will also include it's own **Bootstrap** and **FontAwesome** files that can sometime be of older versions. To ensure we're using the appropriate Bootstrap and FontAwesome files, you need to remove them or replace them with the links from above. If you forget to remove them it's possible that some of components will not work as expected.
---
### 3. Using's
In your main `_Imports.razor` add:
```cs
@using Blazorise
```
### 4. Registrations
Starting from **.Net Core 3.2** there was some changes regarding the setup process for **Blazor WebAssembly** project types. Specifically the **Startup.cs** file is removed and all registrations are now done in the **Program.cs**.
---
Depending on the hosting model of your Blazor project you only need to apply either step **4.a** or **4.b**. You should not include both of them as that is generally not supported.
To Learn more about the different project types you can go to the official [documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0).
---
#### 4.a Blazor WebAssembly
This step is mandatory for **Blazor WebAssembly**(client-side) and also for **ASP.NET Core hosted** project types. You should place the code into the **Program.cs** of your **client** project.
```cs
// other usings
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
public class Program
{
public static async Task Main( string[] args )
{
var builder = WebAssemblyHostBuilder.CreateDefault( args );
builder.Services
.AddBlazorise( options =>
{
options.ChangeTextOnKeyPress = true;
} )
.AddBootstrapProviders()
.AddFontAwesomeIcons();
builder.Services.AddSingleton( new HttpClient
{
BaseAddress = new Uri( builder.HostEnvironment.BaseAddress )
} );
builder.RootComponents.Add( "#app" );
var host = builder.Build();
host.Services
.UseBootstrapProviders()
.UseFontAwesomeIcons();
await host.RunAsync();
}
}
```
#### 4.b Blazor Server
This step is going only into the **Startup.cs** of your **Blazor Server** project.
```cs
// other usings
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
public class Startup
{
public void ConfigureServices( IServiceCollection services )
{
services
.AddBlazorise( options =>
{
options.ChangeTextOnKeyPress = true; // optional
} )
.AddBootstrapProviders()
.AddFontAwesomeIcons();
// other services
}
public void Configure( IComponentsApplicationBuilder app )
{
// other settings
app.UseRouting();
app.ApplicationServices
.UseBootstrapProviders()
.UseFontAwesomeIcons();
app.UseEndpoints( endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage( "/_Host" );
} );
}
}
```
## Usage
```html
@page "/counter"
CounterCurrent count: @currentCount
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
```
## Try Preview
If you're willing to try preview versions of Blazorise all you need to do is to setup Visual Studio so it knows how to use Blazorise [MyGet feed](https://www.myget.org/feed/Details/blazorise). The easies way to do this is to create `NuGet.config` file and place it into your solution root folder. Then you copy the following content and paste it to the `NuGet.config`.
```xml
```
Now you will be able to get preview versions of Blazorise with the latest changes and bug fixes.