Tabs & Accordion

Tabs — horizontal (Line)

razor

@using BzCore.Components.Tabs
@using BzCore.Components.Accordion

<BzTabs @ref="tabs" Variant="BzTabsVariant.Line">
    <BzTab Title="پروفایل" Icon="fa-solid fa-user">محتوای تب…</BzTab>
    <BzTab Title="تنظیمات" Icon="fa-solid fa-gear" Badge="3">…</BzTab>
    <BzTab Title="غیرفعال" Disabled="true">…</BzTab>
</BzTabs>

@* کنترل با reference: tabs.Next() / tabs.Previous() / tabs.Select(1) *@
@* عمودی: Orientation="BzOrientation.Vertical" — ظاهرها: Line/Pills/Boxed *@

Tabs — Pills and Boxed

Every variant shares one snippet; only Variant changes.

razor

@using BzCore.Components.Tabs
@using BzCore.Enums

@* Only Variant changes: Line | Pills | Boxed ... *@
<BzTabs Variant="BzTabsVariant.Pills">
    <BzTab Title="یک">محتوای یک</BzTab>
    <BzTab Title="دو">محتوای دو</BzTab>
    <BzTab Title="سه">محتوای سه</BzTab>
</BzTabs>

<BzTabs Variant="BzTabsVariant.Boxed">
    <BzTab Title="روزانه">گزارش روزانه</BzTab>
    <BzTab Title="هفتگی">گزارش هفتگی</BzTab>
    <BzTab Title="ماهانه">گزارش ماهانه</BzTab>
</BzTabs>

Tabs — vertical

With a vertical Orientation the tabs sit beside the content — good for a settings page.

razor

@using BzCore.Components.Tabs
@using BzCore.Enums

<BzTabs Orientation="BzOrientation.Vertical" Variant="BzTabsVariant.Line">
    <BzTab Title="حساب کاربری" Icon="fa-solid fa-id-card">تنظیمات حساب</BzTab>
    <BzTab Title="امنیت" Icon="fa-solid fa-shield">تنظیمات امنیتی</BzTab>
    <BzTab Title="اعلان ها" Icon="fa-solid fa-bell">تنظیمات اعلان</BzTab>
</BzTabs>

Accordion — 5 variants

Default

Orders ship within 2 to 5 working days. The open/close animation is smooth.

Undamaged goods can be returned within 7 days.

Every component carries an authenticity guarantee.

Separated

First answer.

Second answer.

Bordered

Content A.

Content B.

Filled

Account details.

Security settings.

Minimal

Text 1.

Text 2.

Not shown.

razor

@using BzCore.Components.Tabs
@using BzCore.Components.Accordion

<BzAccordion @ref="acc" Multiple="true" Variant="BzAccordionVariant.Default">
    <BzAccordionItem Title="سوال اول" Icon="fa-solid fa-circle-question" Expanded="true">
        پاسخ…
    </BzAccordionItem>
    <BzAccordionItem Title="سوال دوم">پاسخ…</BzAccordionItem>
</BzAccordion>

@* ظاهرها: Default / Separated / Bordered / Filled / Minimal *@
@* کنترل: acc.ExpandAll() / acc.CollapseAll() *@