_settings.LogoTextBlazify
فارسی English
Docs

Installation & setup

You can install the Blazify library easily.

1 Install the package

Install the free Blazify package from NuGet:

bash 
dotnet add package Blazify

2 Register the service

Add the Blazify service in Program.cs:

csharp 
builder.Services.AddBlazify(o =>
{
    o.DefaultTheme = BzThemeKind.Light;
    o.Direction    = BzDirection.Rtl;   // Persian / RTL
    o.Font         = BzFont.IranSans;
    o.Dense        = true;              // compact metrics across Blazify
});

3 Styles & scripts

Reference the stylesheet and scripts in App.razor / your host page:

html 
<link rel="stylesheet" href="/_content/Blazify/css/blazify.css" />
<script src="/_content/Blazify/js/blazify.js"></script>

4 Namespaces

Add the namespaces you need to _Imports.razor:

razor 
@using BzCore.Enums
@using BzCore.Theming
@using BzCore.Components.Button
@using BzCore.Components.Grid
@using BzCore.Components.Dialog
@using BzCore.Components.Notification

5 Theme provider and hosts

Wrap the app with ThemeProvider and add the dialog and notification hosts once in your layout:

razor 
<BzThemeProvider>
    <Router AppAssembly="@typeof(Program).Assembly">
        ...
    </Router>
    <BzDialogHost />
    <BzNotificationHost />
</BzThemeProvider>

6 Use it

Now use any component freely:

razor 
<BzButton Color="BzColor.Primary">Hello world</BzButton>

That's it! Visit the components page to see everything.

Components

7 New BzGrid APIs

Disable rows with a dynamic predicate, select arbitrary rows, and constrain header actions by selection count.

razor 
<BzGrid TItem="Order"
        Items="@orders"
        Selectable MultiSelect
        @bind-SelectedItems="selected"
        RowDisabled="@(order => order.IsFinalized)"
        HeaderActions="@actions">
    <Columns>
        <BzColumn TItem="Order" Title="Id" Field="@(order => order.Id)" />
    </Columns>
</BzGrid>

@code {
    IReadOnlyCollection<Order> selected = [];

    IReadOnlyList<BzGridHeaderAction<Order>> actions =
    [
        new() { Title = "Create", SelectionRequirement = BzGridActionSelectionRequirement.None },
        new() { Title = "View", SelectionRequirement = BzGridActionSelectionRequirement.ExactlyOne },
        new() { Title = "Approve", SelectionRequirement = BzGridActionSelectionRequirement.OneOrMore }
    ];
}

Use Theme.SetDense(true/false) to change global density at runtime, or Dense=false to opt a component out.

Full BzGrid demo