کتابخونه کامپوننت Bz

کنترل‌های فرم

Checkbox، Switch، Radio، Select، MultiSelect، Slider، Rating، Stepper، Color، Time، Tag، OTP.

انتخابی

True
False

Radio

tehran

کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzCheckbox @bind-Value="chk" Label="من موافقم" />
<BzSwitch @bind-Value="sw" Label="اعلان‌ها" />
<BzRadioGroup TValue="string" @bind-Value="radio"
               Orientation="BzOrientation.Horizontal" Items="opts" />

@code {
    bool chk = true, sw;
    string? radio = "tehran";
    List<BzOption<string>> opts = new()
    {
        new("tehran", "تهران"), new("mashhad", "مشهد"),
        new("isfahan", "اصفهان"), new("shiraz", "شیراز")
    };
}

Select و MultiSelect

sel= | multi=tehran

کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzSelect TValue="string" @bind-Value="sel" Label="شهر" Items="opts"
           Clearable Placeholder="یک شهر…" />
<BzMultiSelect TValue="string" @bind-Values="multi" Label="شهرها" Items="opts" />

@code {
    string? sel;
    List<string> multi = new() { "tehran" };
    List<BzOption<string>> opts = new()
    {
        new("tehran", "تهران"), new("mashhad", "مشهد"),
        new("isfahan", "اصفهان"), new("shiraz", "شیراز")
    };
}

عددی و امتیاز

40

3 / 5
کد
@using BzCore.Components.Input

<BzSlider @bind-Value="slider" Label="میزان" Min="0" Max="100" />
<BzRating @bind-Value="rate" ShowValue />
<BzNumberStepper @bind-Value="num" Label="تعداد" Min="0" Max="10" />

@code {
    double slider = 40, num = 2;
    int rate = 3;
}

رنگ، زمان، تگ، OTP

Blazor RTL

کد یک‌بارمصرف (OTP)

otp= | color=#2f6fed | time=09:30 | tags=Blazor،RTL

کد
@using BzCore.Components.Input

<BzColorPicker @bind-Value="color" Label="رنگ برند" />
<BzTimePicker @bind-Value="time" Label="ساعت" />
<BzTagInput @bind-Values="tags" Label="برچسب‌ها" />
<BzOtpInput @bind-Value="otp" Length="5" />

@code {
    string? color = "#2563eb", time = "09:30", otp;
    List<string> tags = new() { "Blazor", "RTL" };
}