BzTimeline / BzFooter

تایم لاین و فوتر

تایم لاین افقی و عمودی با شش ظاهر، و فوتر با شش ظاهر.

تایم لاین عمودی

یه لیست BzTimelineItem بده — عنوان، متن، زمان، آیکن و رنگ.

09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
razor
@using BzCore.Components.Timeline
@using BzCore.Enums

<BzTimeline Items="_events"
            Orientation="BzOrientation.Vertical"
            Variant="BzTimelineVariant.Default" />

@code {
    // BzTimelineItem(title, text, time, icon, color)
    private List<BzTimelineItem> _events = new()
    {
        new("ثبت سفارش", "سفارش شما با موفقیت ثبت شد.", "09:12", "fa-solid fa-cart-shopping", BzColor.Primary),
        new("پرداخت", "پرداخت تایید شد.", "09:15", "fa-solid fa-credit-card", BzColor.Success),
        new("آماده سازی", "در حال بسته بندی.", "10:40", "fa-solid fa-box", BzColor.Warning),
        new("ارسال", "تحویل پست شد.", "13:20", "fa-solid fa-truck", BzColor.Info),
    };
}
شش ظاهر تایم لاین

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

Default
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Alternate
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Filled
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Outlined
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Minimal
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Gradient
09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
Variant توضیح
Defaultخط ساده با نقطه های رنگی (پیش فرض)
Alternateآیتم ها یک در میان چپ و راست
Filledنقطه های توپر و پررنگ
Outlinedنقطه های توخالی با حاشیه
Minimalکمترین تزیینات
Gradientخط با گرادیان رنگی
razor
@using BzCore.Components.Timeline
@using BzCore.Enums

@* Only Variant changes: Default | Alternate | Filled | Outlined | Minimal | Gradient *@
<BzTimeline Items="_events" Variant="BzTimelineVariant.Filled" />

@* Or render every variant at once: *@
@foreach (var v in Enum.GetValues<BzTimelineVariant>())
{
    <h4>@v</h4>
    <BzTimeline Items="_events" Variant="v" />
}

@code {
    private List<BzTimelineItem> _events = new()
    {
        new("ثبت سفارش", "سفارش شما ثبت شد.", "09:12", "fa-solid fa-cart-shopping", BzColor.Primary),
        new("پرداخت", "پرداخت تایید شد.", "09:15", "fa-solid fa-credit-card", BzColor.Success),
    };
}
تایم لاین افقی

فقط Orientation را عوض کنید — مناسب مراحل یک فرآیند.

09:12
ثبت سفارش
سفارش شما با موفقیت ثبت شد.
09:15
پرداخت
پرداخت تایید شد.
10:40
آماده سازی
در حال بسته بندی.
13:20
ارسال
تحویل پست شد.
razor
@using BzCore.Components.Timeline
@using BzCore.Enums

<BzTimeline Items="_events"
            Orientation="BzOrientation.Horizontal"
            Variant="BzTimelineVariant.Default" />

@code {
    private List<BzTimelineItem> _events = new()
    {
        new("ثبت سفارش", "سفارش شما ثبت شد.", "09:12", "fa-solid fa-cart-shopping", BzColor.Primary),
        new("پرداخت", "پرداخت تایید شد.", "09:15", "fa-solid fa-credit-card", BzColor.Success),
        new("ارسال", "تحویل پست شد.", "13:20", "fa-solid fa-truck", BzColor.Info),
    };
}
Footer — Columns

ستون های فوتر را خودتان به عنوان ChildContent می دهید.

razor
@using BzCore.Components.Footer
@using BzCore.Enums

<BzFooter Variant="BzFooterVariant.Columns"
          Copyright="© 1404 بلیزی فای. تمام حقوق محفوظ است.">
    <div class="bz-footer-col">
        <h4>محصول</h4>
        <a href="#">امکانات</a>
        <a href="#">قیمت گذاری</a>
        <a href="#">مستندات</a>
    </div>
    <div class="bz-footer-col">
        <h4>شرکت</h4>
        <a href="#">درباره ما</a>
        <a href="#">وبلاگ</a>
        <a href="#">تماس</a>
    </div>
    <div class="bz-footer-col">
        <h4>پشتیبانی</h4>
        <a href="#">راهنما</a>
        <a href="#">سوالات متداول</a>
    </div>
</BzFooter>

@* The Bottom section adds a second row under the columns:
    <Bottom>
        <a href="#">قوانین</a>
        <a href="#">حریم خصوصی</a>
    </Bottom>
*@
شش ظاهر فوتر

بدون ChildContent، فوتر فقط Copyright را نشان میده. باز هم فقط Variant فرق میکنه.

Simple
Columns
Dark
Gradient
Centered
Minimal
Variant توضیح
Simpleیک نوار ساده (پیش فرض)
Columnsچند ستون لینک
Darkپس زمینه ی تیره
Gradientپس زمینه ی گرادیانی
Centeredمحتوای وسط چین
Minimalکمترین تزیینات
razor
@using BzCore.Components.Footer
@using BzCore.Enums

@* Only Variant changes: Simple | Columns | Dark | Gradient | Centered | Minimal *@
<BzFooter Variant="BzFooterVariant.Gradient" Copyright="ساخته شده با بلیزی فای" />

@foreach (var v in Enum.GetValues<BzFooterVariant>())
{
    <BzFooter Variant="v" Copyright="ساخته شده با بلیزی فای" />
}