Need help with Blazorise?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Megabit d.o.o.
[email protected]
1.8K Stars 314 Forks MIT License 2.3K Commits 200 Opened issues

Description

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Bulma, AntDesign, and Material.

Services available

!
?

Need anything else?

Contributors list

# 18,175
blazor
C#
webasse...
antdesi...
1419 commits
# 138,802
C#
HTML
antdesi...
Bootstr...
47 commits
# 158,420
C#
.NET
rules-e...
HTML
23 commits
# 204,656
C#
HTML
snackba...
antdesi...
18 commits
# 184,483
c-sharp
XML
.NET
Xamarin
17 commits
# 33,775
Angular
mind-ma...
linq
entity-...
13 commits
# 230,476
C#
HTML
snackba...
antdesi...
13 commits
# 177,017
C#
entity-...
mariadb
HTML
6 commits
# 333,030
sidebar
C#
HTML
antdesi...
4 commits
# 333,275
sidebar
C#
HTML
antdesi...
4 commits
# 232,509
C#
oauth2
sidebar
HTML
3 commits
# 388,906
Shell
C#
HTML
antdesi...
2 commits
# 398,165
sidebar
C#
HTML
antdesi...
2 commits
# 464,604
sidebar
C#
HTML
antdesi...
1 commit
# 465,088
sidebar
C#
HTML
antdesi...
1 commit
# 464,605
sidebar
C#
HTML
antdesi...
1 commit
# 407,347
C#
HTML
antdesi...
Bootstr...
1 commit
# 465,089
sidebar
C#
HTML
antdesi...
1 commit
# 3,156
sass-fr...
splash
Socket....
pipelin...
1 commit
# 442,795
sidebar
C#
antdesi...
Bootstr...
1 commit

Blazorise

Components for Blazor

NuGet MyGet Nuget Join the chat at https://gitter.im/stsrki/Blazorise Slack MIT Tip Me via PayPal Buy me a Coffee Patreon

Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.

Demos

Blazor WebAssembly

Blazor Server

Note: This project is still experimental so it's possible that some components will be removed or refactored.

Releases and Roadmap

Documentation

For full documentation, please visit the Blazorise official documentation page.

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 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 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}
.
  
  
  

  
  


  


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:
@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.


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.

// 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>( "#app" );

var host = builder.Build();

await host.RunAsync();

} }

4.b Blazor Server

This step is going only into the Startup.cs of your Blazor Server project.

// 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.UseEndpoints( endpoints =&gt;
{
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage( "/_Host" );
} );

} }

Usage

@page "/counter"

Counter

Current count: @currentCount

Click me

@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. 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
.
  
    
  

Now you will be able to get preview versions of Blazorise with the latest changes and bug fixes.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.