کتابخونه کامپوننت Bz

اجزای نمایش

Avatar، Badge، Skeleton، EmptyState، Divider.

Avatar

ع
A B C
کد 
@using BzCore.Components.Display
@using BzCore.Enums

<BzAvatar Text="علی" />
<BzAvatar Icon="fa-solid fa-user" Color="var(--bz-success)" />
<BzAvatar ImageUrl="https://.../80.jpg" Shape="BzAvatarShape.Rounded" />

<BzAvatarGroup>
    <BzAvatar Text="A" Color="var(--bz-primary)" />
    <BzAvatar Text="B" Color="var(--bz-warning)" />
    <BzAvatar Text="C" Color="var(--bz-danger)" />
</BzAvatarGroup>

Badge / Chip

جدید موفق هشدار خطر آنلاین
کد 
@using BzCore.Components.Display
@using BzCore.Enums

<BzBadge Text="جدید" />
<BzBadge Text="موفق" Variant="BzBadgeVariant.Soft" Color="BzColor.Success" />
<BzBadge Text="هشدار" Variant="BzBadgeVariant.Outline" Color="BzColor.Warning" />
<BzBadge Text="خطر" Color="BzColor.Danger" Icon="fa-solid fa-bell" />
<BzBadge Variant="BzBadgeVariant.Dot" Color="BzColor.Success" />

Skeleton

کد 
@using BzCore.Components.Display

<BzSkeleton Circle Width="48px" Height="48px" />
<BzSkeleton Height="14px" Width="60%" />
<BzSkeleton Height="14px" Width="90%" />

Divider

بالا

پایین کنار هم

یا
کد 
@using BzCore.Components.Display
@using BzCore.Enums

<BzDivider />
<BzDivider Orientation="BzDividerOrientation.Vertical" />
<BzDivider Text="یا" />

EmptyState

سفارشی یافت نشد

هنوز سفارشی ثبت نشده است.

کد 
@using BzCore.Components.Display
@using BzCore.Components.Button
@using BzCore.Enums

<BzEmptyState Title="سفارشی یافت نشد" Description="هنوز سفارشی ثبت نشده است.">
    <Action>
        <BzButton Text="ثبت سفارش" Color="BzColor.Primary" StartIcon="fa-solid fa-plus" />
    </Action>
</BzEmptyState>