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

Overlay و ناوبری

Drawer، ContextMenu، Pagination، Carousel، Lightbox.

Drawer

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

<BzButton Text="باز کردن" OnClick="@(() => drawer = true)" />

<BzDrawer @bind-Open="drawer" Title="فیلترها" Side="BzDrawerSide.End">
    <ChildContent><p>محتوای کشو.</p></ChildContent>
    <Footer><BzButton Text="اعمال" Color="BzColor.Primary" FullWidth
                       OnClick="@(() => drawer = false)" /></Footer>
</BzDrawer>

@code { bool drawer; }

ContextMenu (راست‌کلیک)

روی این کادر راست‌کلیک کن
کد
@using BzCore.Components.Overlay
@using BzCore.Components.Navigation

<BzContextMenu Items="ctx">
    <div>روی این کادر راست‌کلیک کن</div>
</BzContextMenu>

@code {
    List<BzMenuItem> ctx = new()
    {
        new() { Text = "ویرایش", Icon = "fa-solid fa-pen" },
        new() { Text = "حذف", Icon = "fa-solid fa-trash" },
    };
}

Pagination

صفحه: 1

کد
@using BzCore.Components.Overlay

<BzPagination @bind-Page="page1" TotalPages="12" />

@code { int page1 = 1; }

Carousel (Swiper)

کد
@using BzCore.Components.Overlay

<BzCarousel PerView="1" Autoplay="3000" Slides="slides" />

@code {
    List<RenderFragment> slides = new()
    {
        b => b.AddMarkupContent(0, "<div>اسلاید 1</div>"),
        b => b.AddMarkupContent(0, "<div>اسلاید 2</div>"),
    };
}

Lightbox / گالری

کد
@using BzCore.Components.Overlay

<BzLightbox Images="imgs" />

@code {
    List<string> imgs = new() { "/img/1.jpg", "/img/2.jpg", "/img/3.jpg" };
}