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 component.

enum

AvatarPresence

public enum AvatarPresence

class

Avatar

public sealed class Avatar : ComponentBase<Avatar, HTMLElement>

Constructors

Constructor

Avatar

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

Initializes a new instance of this class.

Properties

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

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>

Constructors

Constructor

Persona

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

Initializes a new instance of this class.

Methods

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.js

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.js

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.js

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

Referenced by

Image

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

Referenced by