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

  • By Megabit
  • Last update: Dec 29, 2022
  • Comments: 16

Blazorise

Components for Blazor

NuGet MyGet Nuget Join the chat at https://gitter.im/stsrki/Blazorise Discord Apache 2.0 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.

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

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

Github

https://github.com/Megabit/Blazorise

Comments(16)

  • 1

    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

  • 2

    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)

  • 3

    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

    Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The requested module '../Blazorise/utilities.js' does not provide an export named 'isString'
      SyntaxError: The requested module '../Blazorise/utilities.js' does not provide an export named 'isString'
Microsoft.JSInterop.JSException: The requested module '../Blazorise/utilities.js' does not provide an export named 'isString'
SyntaxError: The requested module '../Blazorise/utilities.js' does not provide an export named 'isString'
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Blazorise.Video.JSVideoModule.UpdateOptions(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Video.Video.<>c__DisplayClass0_0.<<SetParametersAsync>b__0>d.MoveNext()
--- End of stack trace from previous location ---
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.Video.Video.OnAfterRenderAsync(Boolean firstRender)

    I'm just using it like this

      <Video  Source="@video.DashUrl" 
          ProtectionType="VideoProtectionType.Widevine"
          StreamingLibrary="StreamingLibrary.Dash"
          ProtectionHttpRequestHeaders="@video.Token"/> 

    VideoDto video { get; set; } = new VideoDto();
  • 4

    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

    <BusyLoading @ref="refBusy">
   <Chart />
</BusyLoading>
<Button Click="() => refBusy.Busy(true); RefreshChart(); refBusy.Busy(false)" />

    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

  • 5

    [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

  • 6

    Video Player

    closes #3265

    The video component is based on Plyr and supports:

    • Source parameter can accept string and complex object(VideoSource)
    • HLS and DASH streaming videos. Requires explicitly defining it with StreamingLibrary parameter
    • Dynamic update of video settings
    • Events coming from Plyr
  • 7

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

  • 8

    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.

    • https://jonhilton.net/tailwind3-blazor/
    • https://chrissainty.com/adding-tailwind-css-v3-to-a-blazor-app/
  • 9

    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.

  • 10

    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 changing SelectedItems by code, the Select component doesn't recognize this change.

    <Select  class="form-control" Multiple="true" TValue="int" @bind-SelectedValues="@selectedTags">
..
..
@code {

IReadOnlyList<int> selectedTags;
...
...

private void ShowEditForm()
{
var newTags = new List<int>() { 1, 2 };
selectedTags = newTags.AsReadOnly();
...
}

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior Select component should update itself when SelectedItems is changed by code.

  • 11

    FileEdit Progressed event does not update UI

    <FileEdit Multiple="false" Changed="@OnChanged" Progressed="@OnProgressed"></FileEdit>

    <ProgressBar Value="@PercentageLoad">@PercentageLoad%</ProgressBar>

            public void OnProgressed(FileProgressedEventArgs e)
        {
            Debug.WriteLine($"File: {e.File.Name} Progress: {e.Percentage}");
            PercentageLoad = (int)e.Percentage;
            this.StateHasChanged();
        }

    Progress bar does not refreshing

  • 12

    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

    <DatePicker
              KeyUp="@((e) => {
                                 Console.Write("This log is not printed");
                                  if (e.Code == "Enter" || e.Code == "NumpadEnter") {
                                      _date = DateTime.Today; }
                                  })"
              DisplayFormat="dd/MM/yyyy"
              DateChanged="DateChanged"
              @ref="_datePicker"
              Date="@_date"
              TValue="DateTime?"/>

    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)

  • 13

    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.

    • [x] Add dependabot configuration file so it is aware of the npm projects to check
    • [x] Add npm package.config for the Blazorise project. I tried finding the correct packages, but please verify that these are the correct packages / versions
    • [x] Add "copy js dependencies" in debug mode step so the software is always shipped with the intended packages
  • 14

    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.

    Screenshot_1

    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:

    1. Go to a Autocomplete Textfield (this could happen across all text fields, I never tested it)
    2. Type in a string FAST, even just repeating to characters can illustrate this behaviour .
    3. Notice that characters will have been dropped from the string.

    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.

  • 15

    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:

    1. Uses npm to manage the js library
    2. Build steps to copy the correct scripts from the npm lib folder into the source folders
    3. Automatically checks for updates and create PRs using dependabot

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

  • 16

    DataGrid usage and error messages with DataAnnotations

    Hello again

    I am currently using DataAnnotations for the models image

    Could the datagrid show the DataAnnotations error message? image image

    instead of using the one that is placed manually as the documentation shows image

    in a nutshell, I want the DataAnnotations message to be displayed

    I will be careful

Popular Tag

Related