Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.
Support for the Blazorise Components is available as part of the Blazorise Commercial subscription.
With the commercial license you get:
- Access to premium themes and templates
- Premium forum support
- Dedicated customer support with 24 or 16 hour response time
- Priority fixes and feature requests
Blazorise is an Apache 2.0-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers.
|
For full documentation, please visit the Blazorise official documentation page.
Continuing reading below for a quick start guide.
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.
There are currently 5 different NuGet packages for each of the supported CSS frameworks. Available packages are:
- Blazorise.Tailwind
- Blazorise.Bootstrap
- Blazorise.Bootstrap5
- Blazorise.Bulma
- Blazorise.Material
- Blazorise.AntDesign
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.
First step is to install a Bootstrap provider for Blazorise:
Install-Package Blazorise.Bootstrap
And FontAwesome icon package:
Install-Package Blazorise.Icons.FontAwesome
Add the following to index.html
(Blazor WebAssembly) or _Host.cshtml
(Blazor Server) in the head
section.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link href="_content/Blazorise/blazorise.css?v=1.1.4.0" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css?v=1.1.4.0" rel="stylesheet" />
Add the following to index.html
or _Host.cshtml
in the body
section.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
Please note, that these are the Blazorise explicit dependencies, you still need to add framework specific dependencies.
Blazorise loads any additional JavaScript it needs dynamically once a component needs it. This means that Blazorise expects that the resources are available and placed relative to the app root. You can configure this by using the app.UseStaticFiles();
and it does not need any other additional configuration from your part.
If you're having any difficulties, please refer to the following issues:
We are also aware that there might need to be extra setup when dealing with PWA and offline capabilities if you want your app to remain responsive. Please check our PWA docs for more information.
In your main _Imports.razor
add:
@using Blazorise
Add the following lines to the relevant sections of Program.cs
.
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
builder.Services
.AddBlazorise( options =>
{
options.Immediate = true;
} )
.AddBootstrapProviders()
.AddFontAwesomeIcons();
@page "/counter"
<Heading Size="HeadingSize.Is1">Counter</Heading>
<Paragraph>Current count: @currentCount</Paragraph>
<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
If you're willing to try preview versions of Blazorise, all you need to do is set up Visual Studio to know how to use Blazorise MyGet feed feed. The easiest 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 version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<add key="BlazoriseMyGet" value="https://www.myget.org/F/blazorise/api/v3/index.json" />
</packageSources>
</configuration>
Now you will be able to get preview versions of Blazorise with the latest changes and bug fixes.
We welcome contributions and any suggestions or feature requests you might have. Contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. This will be signed once you submit a PullRequest on our repository. For details about our CLA, please visit: Contributor License Agreement.
For our code conventions and guidelines please visit: Contributing Guide