Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.
Note: Old documentation can be found at http://v094.blazorise.com/
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.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/[email protected]/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" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:
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 BlazoriseAdd 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.