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

BzInputGroup

یک ورودی با امکان افزودن Template دلخواه قبل و بعد از آن (آیکن، متن، دکمه، Select…) در 6 طرح مختلف.

1) Default — حاشیه‌دار با جداکننده
https://
.ir
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="site" Label="آدرس سایت" Placeholder="example"
               Variant="BzInputGroupVariant.Default">
    <Prepend><i class="fa-solid fa-globe"></i> https://</Prepend>
    <Append>.ir</Append>
</BzInputGroup>

@code {
    string? site;
}
2) Filled — پس‌زمینهٔ نرم
تومان
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="amount" Label="مبلغ" Placeholder="0"
               Variant="BzInputGroupVariant.Filled">
    <Prepend>تومان</Prepend>
    <Append><i class="fa-solid fa-wallet"></i></Append>
</BzInputGroup>

@code {
    string? amount;
}
3) Outlined — Addon تینت‌دار
@
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="user" Label="نام کاربری" Placeholder="username"
               Variant="BzInputGroupVariant.Outlined">
    <Prepend>@@</Prepend>
</BzInputGroup>

@code {
    string? user;
}
4) Pill — گرد کامل + دکمهٔ جستجو
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="query" Placeholder="جستجو…"
               Variant="BzInputGroupVariant.Pill">
    <Prepend><i class="fa-solid fa-magnifying-glass"></i></Prepend>
    <Append>
        <button type="button" @onclick="Search"><i class="fa-solid fa-arrow-left"></i> برو</button>
    </Append>
</BzInputGroup>

@code {
    string? query;
    void Search() { /* handle search */ }
}
5) Underline — خط زیرین مینیمال
+98
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="phone" Label="موبایل" Placeholder="9xxxxxxxxx"
               Variant="BzInputGroupVariant.Underline">
    <Prepend><i class="fa-solid fa-phone"></i> +98</Prepend>
</BzInputGroup>

@code {
    string? phone;
}
6) Seamless — Addonهای جدا (چیپی)
ریال
کد
@using BzCore.Components.Input
@using BzCore.Enums

<BzInputGroup @bind-Value="price" Label="قیمت" Placeholder="0"
               Variant="BzInputGroupVariant.Seamless">
    <Prepend><i class="fa-solid fa-tag"></i></Prepend>
    <Append>ریال</Append>
</BzInputGroup>

@code {
    string? price;
}

site= | amount= | user= | query= | phone= | price=