Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.
Branch: master
Clone or download
Mladen Macanović
Mladen Macanović new: unit tests
Latest commit 4436a38 Feb 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Build bumb version 0.6.0-preview5 Feb 15, 2019
NuGet bumb version 0.6.0-preview5 Feb 15, 2019
Source fixed validations Feb 15, 2019
Tests new: unit tests Feb 18, 2019
docs update docs Feb 14, 2019
.gitignore new: docs Dec 10, 2018
Blazorise.sln new: unit tests Feb 18, 2019
LICENSE.md fix: licence extension Dec 1, 2018
README.md Update README.md Feb 14, 2019
build.cmd updated vs2019 build path in build.bat Feb 8, 2019
clean.bat new: clean bat Feb 7, 2019

README.md

Blazorise components for Blazor

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


NOTE

Blazorise version 0.6 and above are now updated for Blazor 0.8 and .Net Core 3.0 preview2. This version will work only in Visual Studio 2019. If you're still using Blazor 0.7, in that case you will use Blazorise v0.5.x!


Demos

Please look at demos to see Blazorise in action.

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

Releases and Roadmap

Feeds

  • NuGet Nuget
  • Join the chat at https://gitter.im/stsrki/Blazorise

Installations

There are 3 diferent NuGet packages for each of the supported CSS frameworks. Available packages are:

Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Bulma
Install-Package Blazorise.Material

Before continuing please choose one of them and modify your source files and your code accordingly. This guide will show you how to setup Blazorise with Bootstrap provider and FontAwesome icons.

NuGet packages

First step is to install a Bootstrap provider for Blazorise:

Install-Package Blazorise.Bootstrap

You also need to install the icon package:

Install-Package Blazorise.Icons.FontAwesome

Sources files

The next step is to change your index.html file and include the css and js source files:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Usings

In your main _ViewImports.cshtml add:

@addTagHelper *, Blazorise

@using Blazorise

Registrations

Finally in the Startup.cs you must tell the Blazor to register Bootstrap provider and extensions:

using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;

public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise() // from v0.6.0-preview4
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();
}

public void Configure( IComponentsApplicationBuilder app )
{
  app
    .UseBootstrapProviders()
    .UseFontAwesomeIcons();

  app.AddComponent<App>( "app" );
}

Other frameworks

To setup Blazorise for other css frameworks please refer the Usage page in the documentation.