مستندات

نصب و راه اندازی

کتابخانه Blazify را به راحتی نصب کنید

1 نصب پکیج

پکیج رایگان Blazify را نصب کنید

bash
dotnet add package Blazify

2 ثبت سرویس

در فایل 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 استایل و اسکریپت

لینک استایل و اسکریپت را در فایل App.razor یا host اضافه کنید:

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

4 فضاهای نام

فضاهای نام موردنیاز را در فایل _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 تم پروایدر و Hostها

اپ را داخل ThemeProvider قرار دهید و Hostهای دیالوگ و اعلان را یک‌بار به Layout اضافه کنید:

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

6 استفاده کنید

حالا هر کامپوننتی را به راحتی به کار ببرید:

razor
<BzButton Color="BzColor.Primary">سلام دنیا</BzButton>

همین! برای دیدن همه کامپوننت ها به صفحه کامپوننت ها سر بزنید.

کامپوننت ها

7 APIهای جدید BzGrid

ردیف‌ها را با شرط داینامیک کاملاً غیرفعال کنید، چند رکورد مستقل انتخاب کنید و اجرای اکشن‌های Header را به تعداد انتخاب وابسته کنید.

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 }
    ];
}

برای تغییر تراکم کل رابط در زمان اجرا از Theme.SetDense(true/false) و برای خروج یک کامپوننت از حالت متراکم از Dense=false استفاده کنید.

دموی کامل BzGrid