تب و آکاردئون

Tabs — افقی (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 و Boxed

همه ی ظاهرها یک کد دارند و فقط Variant فرق میکنه.

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 — عمودی

با Orientation عمودی، تب ها کنار محتوا می نشینند — مناسب صفحه ی تنظیمات.

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 ظاهر

Default

سفارش ها طی 2 تا 5 روز کاری ارسال می‌شوند. انیمیشن باز/بسته‌شدن نرم است.

تا 7 روز امکان بازگشت کالای سالم وجود دارد.

همه‌ی کامپوننت ها دارای گارانتی اصالت هستند.

Separated

پاسخ اول.

پاسخ دوم.

Bordered

محتوای الف.

محتوای ب.

Filled

جزییات حساب.

تنظیمات امنیتی.

Minimal

متن 1.

متن 2.

دیده نمیشه.

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() *@