All Projects → stsrki → Blazorise

stsrki / Blazorise

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

Programming Languages

C#
18002 projects
CSS
56736 projects
SCSS
7915 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language
Batchfile
5799 projects

Projects that are alternatives of or similar to Blazorise

Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (-14.41%)
Mutual labels:  charts, datagrid, bootstrap
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+426.3%)
Mutual labels:  material, bootstrap, bulma
TheLastTime
C# .NET 5 Blazor WebAssembly Progressive Web Application that tracks when was the last time you did something
Stars: ✭ 23 (-98.91%)
Mutual labels:  asp-net-core, blazor, blazorise
Startbootstrap Simple Sidebar
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,833 (-12.84%)
Mutual labels:  bootstrap, bootstrap4, sidebar
Shards Dashboard
🔥A beautiful Bootstrap 4 admin dashboard templates pack.
Stars: ✭ 1,143 (-45.65%)
Mutual labels:  material, bootstrap, bootstrap4
Primereact
The Most Complete React UI Component Library
Stars: ✭ 2,393 (+13.79%)
Mutual labels:  material, charts, bootstrap
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+687.45%)
Mutual labels:  library, material, components
Amexio.github.io
Amexio is a rich set of Angular 7 (170+) components powered by HTML5 & CSS3 for Responsive Design and with 80+ Material Design Themes, UI Components, Charts, Gauges, Data Point Widgets, Dashboards. Amexio is completely Open Sourced and Free. It's based on Apache 2 License. You can use it in your production grade work today at no cost or no obligation.
Stars: ✭ 163 (-92.25%)
Mutual labels:  components, charts, bootstrap4
Primeng
The Most Complete Angular UI Component Library
Stars: ✭ 7,180 (+241.42%)
Mutual labels:  components, charts, datagrid
Mdb Ui Kit
Bootstrap 5 & Material Design 2.0 UI KIT
Stars: ✭ 21,830 (+938.04%)
Mutual labels:  material, bootstrap, bootstrap4
Formr
Create and Validate PHP Forms in Seconds.
Stars: ✭ 163 (-92.25%)
Mutual labels:  bootstrap, bulma, bootstrap4
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+349.98%)
Mutual labels:  material, bootstrap, bootstrap4
Ajsf
Angular JSON Schema Form
Stars: ✭ 266 (-87.35%)
Mutual labels:  material, bootstrap, bootstrap4
Coreui Vue
Over 90 Bootstrap based Vue.js components and directives. CoreUI React.js UI Components. CoreUI for Vue.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true Vue components, without jQuery and unneeded dependencies.
Stars: ✭ 318 (-84.88%)
Mutual labels:  components, bootstrap, bootstrap4
Aybolit
Lightweight web components library built with LitElement.
Stars: ✭ 90 (-95.72%)
Mutual labels:  material, bootstrap, bulma
Aurelia Slickgrid
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with a few Styling Themes
Stars: ✭ 100 (-95.24%)
Mutual labels:  datagrid, bootstrap, bootstrap4
Bootstrap4 Website
Website built with bootstrap 4 Framework
Stars: ✭ 124 (-94.1%)
Mutual labels:  bootstrap, bootstrap4
Orcharts
饼状图、环形图、扇形图、曲线图、折线图
Stars: ✭ 125 (-94.06%)
Mutual labels:  library, charts
Startbootstrap Heroic Features
A Bootstrap HTML homepage template with feature boxes - created by Start Bootstrap
Stars: ✭ 122 (-94.2%)
Mutual labels:  bootstrap, bootstrap4
Chat Ui Kit React
Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
Stars: ✭ 131 (-93.77%)
Mutual labels:  library, components

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].