Components

Profile

The signed-in person as a button: their avatar, their name if you give it, and a chevron that says it opens something. The menu it opens is a dropdown's.

Drawn and behaving as Flux UI's profile does, measured against its live docs.

Profile

An avatar and a chevron.

ProfileExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileExample : Component
{
    protected override Component? Render() =>
        Ui.Profile.Avatar("/img/avatars/amber.svg");
}

Live result

With a name

ProfileNameExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileNameExample : Component
{
    protected override Component? Render() =>
        Ui.Profile.Name("Mara Lind").Avatar("/img/avatars/amber.svg");
}

Live result

Without a chevron, and round

Chevron(false) drops the chevron; Circle() rounds the avatar and the button with it.

ProfileCircleExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileCircleExample : Component
{
    private const string Mara = "/img/avatars/amber.svg";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Profile.Key("bare").Chevron(false).Avatar(Mara),
            Ui.Profile.Key("circle").Circle().Chevron(false).Avatar(Mara),
            Ui.Profile.Key("circle-name").Circle().Name("Mara Lind").Avatar(Mara)
        ];
}

Live result

Initials

No picture: the initials of Name, or of AvatarName for a profile that shows none, on any colour, or stated with Initials.

ProfileInitialsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileInitialsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Profile.Key("initials").Name("Mara Lind"),
            Ui.Profile.Key("colour").Name("Mara Lind").AvatarColor(Ui.Color.Cyan),
            Ui.Profile.Key("stated").Initials("ML"),
            Ui.Profile.Key("avatar-name").AvatarName("Mara Lind")
        ];
}

Live result

Trailing icon

Another icon in the chevron's place: up and down, for a profile switcher.

ProfileTrailingIconExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileTrailingIconExample : Component
{
    protected override Component? Render() =>
        Ui.Profile.IconTrailing(Ui.IconName.ChevronUpDown).Avatar("/img/avatars/amber.svg").Name("Mara Lind");
}

Live result

With a menu

A dropdown makes it the trigger of the account menu.

ProfileMenuExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProfileMenuExample : Component
{
    protected override Component? Render() =>
        Ui.Dropdown.Bottom.Start[
            Ui.Profile.Name("Rosa Vidal").Avatar("/img/avatars/rose.svg"),
            Ui.Navmenu[
                Ui.NavmenuItem.Href("#").Icon(Ui.IconName.User)["Account"],
                Ui.NavmenuItem.Href("#").Icon(Ui.IconName.Cog6Tooth)["Settings"],
                Ui.NavmenuItem.Href("#").Icon(Ui.IconName.ArrowRightStartOnRectangle)["Logout"]
            ]
        ];
}

Live result

Behaviour

A trigger, and nothing more

A profile is a <button>. It is the trigger of an account menu or a profile switcher, and the menu is the dropdown's: Ui.Dropdown[Ui.Profile.Name("Ada"), Ui.Menu[…]], or a Ui.Navmenu for a menu of links. At the foot of a sidebar the same button is Ui.SidebarProfile, a part of the sidebar layout.

Without a picture

Avatar is an image's address, or an avatar of your own. Without one the profile draws the initials of Name, or of AvatarName for a profile that shows no name, since most accounts have no picture. Initials states them, and AvatarColor fills the circle or square behind them.

Reference

`Ui.Profile`

flux:profile

The signed-in person as a <button>: the trigger of an account menu.

Step	Takes	What it does
`.Name(…)`	`string`	The person's name, beside the avatar.
`.Avatar(…)`	an image's address, or a component	The avatar: a string is an image's address, anything else is drawn as it is.
`.AvatarName(…)`	`string`	The name the initials are worked out from, for a profile that shows none.
`.AvatarColor(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	The fill behind the initials.
`.Circle()`	`bool`	A round avatar, and a button rounded to match.
`.Initials(…)`	`string`	The initials to show, in place of those worked out from the name.
`.Chevron()`	`bool`	The chevron after the name. Shown unless false.
`.IconTrailing(…)`	`Ui.IconName` — one of 317 names	An icon in place of the chevron.
`.IconVariant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of the trailing icon. Micro when unset.