Components for Blazor
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/
Commercial support
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
Supporting Blazorise
Blazorise is an Apache 2.0-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers.
Special Sponsors
|
Demos
Blazor WebAssembly
Blazor Server
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.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.
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>
<head>
<!-- inside of 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" />
</head>
<body>
<div id="app"></div>
<!-- inside of body section and after the div/app tag -->
<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>
</body>
</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:
@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 =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage( "/_Host" );
} );
}
}
Usage
@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++;
}
}
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
.
<?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.
Autocomplete better keyboard handling
Prototype for #3980. Known issue - antdesign needs :focus/:hover class for anchor in the badge
https://user-images.githubusercontent.com/22550674/179865555-4bf23c04-a6be-42fa-81fd-99a569bb5251.mp4
DataGrid Virtualize
Hello @stsrki Here's a very rough start version of the Virtualize on Datagrid. While it didn't take exactly much to get it working with the static data, and it's working quite fine with the filtering and commands, there's a crap ton of work to do with making it behave correctly with everything else.
You can track the progress here and give opinions or even help if you'd like. Closes #1381
(Moved from dev093 to dev094)
The requested module '../Blazorise/utilities.js' does not provide an export named 'isString
Hi, I wasnยดt sure where to put this so here it is @stsrki
I'm getting this error trying out the new (1.0.0 preview 1) Video player
I'm just using it like this
LoadingIndicator component
I found that there is a need for some Wrapper component that would add Busy/Loading UI to other components. I wanted to have a component that is ready to go out of the box without the need for any glue code. So here's a basic usage example
It supports being called via @ref, via (two way) binding, via cascading parameter, or via an external service, busy indicator and loading state can be templated but it's ready to go and has some ability to customize appearance (change color or spinner size) out of the box.
The BusyLoadingService class that comes with the wrapper mainly used for the global application busy wrapper - you register it as a scoped service, inject into main layout and set it on the wrapper, and then inject it into wherever you want to control the wrapper from. Another option for global wrapper is cascading parameter. Multiple wrappers can share an instance of the service to get triggered simultaneously. This type of logic could be left for developers, but i wanted it to be a "batteries included" kind of component.
It can be integrated with the SpinKit, I wasn't sure whether it should be implemented based on spinkit or just have spinkit as an option for templating the busy indicator, I ended up implementing an independet component with its own default spinner so you don't have to take dependency on spinkit without need.
Everybody makes their own, but I thought it would be nice to have one ready to go in the library. Please let me know if you think the same way before I add demo and docs. thanks!
https://user-images.githubusercontent.com/22550674/178591711-5d310a13-516d-46f7-b258-e03a56afc239.mp4
[Proposal] Rename input components
This is just a proposal and I would like to get some help from anyone who can give me feedback.
Currently (almost) all input components have suffix
Edit
. Edit was introduced long ago when Blazor was lacking support on naming components that are similar to regular html tags. eg.<Form>
-<form>
I think now is the time to revisit some of the naming conventions and prepare Blazorise for final v1.0. Bellow is the list of potential names for existing component. Again, any feedback is welcome.
| Current Name | New Name | Or | Or | Reason | |--------------|------------|--------------|----------|----------------------------------------------| | TextEdit | TextBox | TextInput | Input | | | NumericEdit | NumericBox | NumericInput | | | | DateEdit | DateBox | DateInput | | | | CheckEdit | CheckBox | Check | | | | CheckEdit | RadioBox | Radio | | This one is going to be split from CheckEdit | | FileEdit | Upload | FileInput | | | | MemoEdit | MemoBox | MemoInput | Textarea | |
PS. We can do the communication in this thread or on Blazorise Gitter
Video Player
closes #3265
The video component is based on Plyr and supports:
Source
parameter can acceptstring
and complex object(VideoSource)StreamingLibrary
parameterDatagrid: ButtonRow
Hello @stsrki,
Can you take a brief look? I've exposed the ButtonRowTemplate fragment with the CommandContext API, tell me if you like this approach of exposing the same CommandContext as in the CommandContextRow.
I'm not sure if this is possible, but if the new ButtonRowContext could be initialized by Datagrid and then shared by the ButtonRow as well as the new pager we envision, that would be neat.
PS: I can't seem to make my auto format work with the same configurations as you... that sucks...
Tailwind CSS
https://tailwindui.com/
This is good candidate for the next Blazorise provider. The plan is to work on it sometimes before v1.0.
Problem with Layout After Blazorise Update
Something happened to the layout with the latest update to Blazorize. It's as if the
LayoutHeader
isn't there and everything got pushed up.I tried to upload a screenshot but Github keeps erroring when I try.
Select component doesn't recognize changes by code
Describe the bug For example you have an edit form with a multiple select component. When select items
SelectedItems
contains the selected values. But when changingSelectedItems
by code, the Select component doesn't recognize this change.To Reproduce Steps to reproduce the behavior:
Expected behavior Select component should update itself when
SelectedItems
is changed by code.FileEdit Progressed event does not update UI
<FileEdit Multiple="false" Changed="@OnChanged" Progressed="@OnProgressed"></FileEdit>
<ProgressBar Value="@PercentageLoad">@PercentageLoad%</ProgressBar>
Progress bar does not refreshing
DatePicker keyboard events not triggered
Describe the bug I'm trying to allow the user to press enter to set the current date into de DatePicker. However the 'KeyUp' method is not triggered.
To Reproduce
Expected behavior Current date to be entered
(Not sure it is a bug, but I also noticed you can't control the datepicker with your keyboard, like you can in Flatpickr)
Dependabot for js dependencies
As discussed in #4444 , this is a PoC to add dependabot for the js dependencies.
Note that this is a PoC to show how it can be used and is not a full solution.
Textfield in Autocomplete is swallowing characters when typing extremely fast
I have an autocomplete component set up and when typing in it fast, it will drop characters from the text field.
After typing in the string "testing123" notice that the N and 1 have been dropped from the string. The behaviour of what characters are being dropped appears to happen at random.
Steps to reproduce the behavior:
Not something that is a major concern as most users won't have a fast typing speed, but it is a little bit of wacky behaviour that I noticed.
Thanks.
Add dependabot notificaftions for updated js libs
Is your feature request related to a problem? Please describe.
It's about outdated js library versions.
Describe the solution you'd like
For internal projects, I've set up dependabot for the js libs. At least there is a signal when a new version is shipped so it doesn't always leave the library with outdated libs.
Additional context
Happy to provide a PR that:
We use this in our own projects and we really like this workflow since it's easy to "forget" about checking new updates for js libraries (in a .NET world).
DataGrid usage and error messages with DataAnnotations
Hello again
I am currently using DataAnnotations for the models
Could the datagrid show the DataAnnotations error message?

instead of using the one that is placed manually as the documentation shows
in a nutshell, I want the DataAnnotations message to be displayed
I will be careful