Timeline & Footer

Vertical timeline

Hand it a list of BzTimelineItem — title, text, time, icon and colour.

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),
    };
}

The six timeline variants

All six share one snippet; only Variant changes.

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	Description
`Default`	A plain line with coloured dots (default)
`Alternate`	Items alternate between the two sides
`Filled`	Solid, filled dots
`Outlined`	Hollow dots with a border
`Minimal`	The least decoration
`Gradient`	A gradient line

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),
    };
}

Horizontal timeline

Just change Orientation — good for the steps of a process.

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

You supply the footer columns yourself as 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>
*@

The six footer variants

Without ChildContent the footer just shows the Copyright. Again, only Variant changes.

Simple

Columns

Dark

Gradient

Centered

Minimal

Variant	Description
`Simple`	A plain bar (default)
`Columns`	Several link columns
`Dark`	A dark background
`Gradient`	A gradient background
`Centered`	Centred content
`Minimal`	The least decoration

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="ساخته شده با بلیزی فای" />
}