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