Tesserae - Avatar

Avatar

Description

A component that represents a user

Avatars are used to represent users, teams, or entities in the system. They can display images, initials, and presence indicators.

The Persona component builds upon Avatar by adding textual information like name, role, and status, making it ideal for profile cards or contact lists.

API reference

enum

AvatarSize

public enum AvatarSize

Predefined size presets used by the Avatar component.

Namespace: Tesserae

enum

AvatarPresence

public enum AvatarPresence

Namespace: Tesserae

class

Avatar

public sealed class Avatar : ComponentBase<Avatar, HTMLElement>

Namespace: Tesserae
Inheritance: ComponentBase<Avatar, HTMLElement> → Avatar

Constructors

Name	Description
Avatar	Initializes a new instance of this class.

Constructor

Avatar

public Avatar(string image = null, string initials = null)

Initializes a new instance of this class.

Properties

Name	Description
ImageUrl	Gets or sets the image url.
Initials	Gets or sets the initials.
SizeValue	Gets or sets the size value.
PresenceState	Gets or sets the presence state.

Property

Avatar.ImageUrl

public string ImageUrl { get ; set ; }

Gets or sets the image url.

Property

Avatar.Initials

public string Initials { get ; set ; }

Gets or sets the initials.

Property

Avatar.SizeValue

public AvatarSize SizeValue { get ; set ; }

Gets or sets the size value.

Property

Avatar.PresenceState

public AvatarPresence PresenceState { get ; set ; }

Gets or sets the presence state.

Methods

Name	Description
SetImage	Sets the image of the component.
SetInitials	Sets the initials of the component.
Size	Gets or sets the size of the component.
Presence	Configures the component to presence.
Background	Gets or sets the CSS background of the component.
Foreground	Gets or sets the CSS color (foreground) of the component.
Render	Renders the component's root HTML element.

Method

Avatar.SetImage

public Avatar SetImage(string url)

Sets the image of the component.

Method

Avatar.SetInitials

public Avatar SetInitials(string initials)

Sets the initials of the component.

Method

Avatar.Size

public Avatar Size(AvatarSize size)

Gets or sets the size of the component.

Method

Avatar.Presence

public Avatar Presence(AvatarPresence presence)

Configures the component to presence.

Method

Avatar.Background

public Avatar Background(string color)

Gets or sets the CSS background of the component.

Method

Avatar.Foreground

public Avatar Foreground(string color)

Gets or sets the CSS color (foreground) of the component.

Method

Avatar.Render

public override HTMLElement Render()

Renders the component's root HTML element.

class

Persona

public sealed class Persona : ComponentBase<Persona, HTMLElement>

Namespace: Tesserae
Inheritance: ComponentBase<Persona, HTMLElement> → Persona

Constructors

Name	Description
Persona	Initializes a new instance of this class.

Constructor

Persona

public Persona(string name = null, string secondaryText = null, string tertiaryText = null, Avatar avatar = null)

Initializes a new instance of this class.

Methods

Name	Description
SetAvatar	Sets the avatar of the component.
SetName	Sets the name of the component.
SetSecondaryText	Sets the secondary text of the component.
SetTertiaryText	Sets the tertiary text of the component.
Compact	Renders the component in a compact form.
Render	Renders the component's root HTML element.

Method

Persona.SetAvatar

public Persona SetAvatar(Avatar avatar)

Sets the avatar of the component.

Method

Persona.SetName

public Persona SetName(string name)

Sets the name of the component.

Method

Persona.SetSecondaryText

public Persona SetSecondaryText(string text)

Sets the secondary text of the component.

Method

Persona.SetTertiaryText

public Persona SetTertiaryText(string text)

Sets the tertiary text of the component.

Method

Persona.Compact

public Persona Compact(bool value = true)

Renders the component in a compact form.

Method

Persona.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Avatar Sizes and Presence

Avatars support various sizes from XSmall to XLarge and optional presence states.

avatar-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var avatars = HStack().Children(
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.XSmall),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Small).Presence(AvatarPresence.Online),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Medium).Presence(AvatarPresence.Away),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.Large).Presence(AvatarPresence.Busy),
                Avatar(initials: "JD", image: "https://cataas.com/cat").Size(AvatarSize.XLarge).Presence(AvatarPresence.Offline));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(avatars);
        }
    }
}

Initials Fallback

When no image is provided, initials are displayed with a generated background color derived from a deterministic hash of the initials.

avatar-initials-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var avatars = HStack().Children(
                Avatar(initials: "JD").Size(AvatarSize.Small).Presence(AvatarPresence.Online),
                Avatar(initials: "AS").Size(AvatarSize.Medium).Presence(AvatarPresence.Away),
                Avatar(initials: "KL").Size(AvatarSize.Large).Presence(AvatarPresence.Busy),
                Avatar(initials: "MW").Size(AvatarSize.XLarge).Presence(AvatarPresence.Offline));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(avatars);
        }
    }
}

Persona Component

Personas combine an avatar with descriptive text.

avatar-persona-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var personas = VStack().Children(
                Persona("Jordan Diaz", "Product Designer", "Available for collaboration", Avatar(initials: "JD").Presence(AvatarPresence.Online)),
                Persona("Alex Smith", "Software Engineer", "Focusing...", Avatar(initials: "AS").Presence(AvatarPresence.Busy)),
                Persona("Kelly Lee", "Project Manager", "Away", Avatar(initials: "KL").Presence(AvatarPresence.Away)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(personas);
        }
    }
}

Avatar

Description

API reference

Constructors

Avatar

Properties

Avatar.ImageUrl

Avatar.Initials

Avatar.SizeValue

Avatar.PresenceState

Methods

Avatar.SetImage

Avatar.SetInitials

Avatar.Size

Avatar.Presence

Avatar.Background

Avatar.Foreground

Avatar.Render

Constructors

Persona

Methods

Persona.SetAvatar

Persona.SetName

Persona.SetSecondaryText

Persona.SetTertiaryText

Persona.Compact

Persona.Render

Samples

Avatar Sizes and Presence

Initials Fallback

Persona Component

See also