Avatar

An image element with a fallback for representing the user.

use leptos::prelude::*;
use singlestage::avatar::*;

#[component]
pub fn AvatarExample() -> impl IntoView {
    view! {
        <Avatar class="size-12">
            <AvatarImage alt="@adoyle0" src="/avatar.jpg" />
        </Avatar>
    }
}

Fallback

use leptos::prelude::*;
use singlestage::avatar::*;

#[component]
pub fn AvatarFallbackExample() -> impl IntoView {
    view! {
        <Avatar class="size-12">
            <AvatarFallback>"AD"</AvatarFallback>
        </Avatar>
    }
}

Overlapping

use leptos::prelude::*;
use singlestage::avatar::*;

#[component]
pub fn AvatarMultiExample() -> impl IntoView {
    view! {
        <div class="flex -space-x-2">
            <Avatar>
                <AvatarFallback>"AB"</AvatarFallback>
            </Avatar>
            <Avatar>
                <AvatarFallback>"CD"</AvatarFallback>
            </Avatar>
            <Avatar>
                <AvatarFallback>"EF"</AvatarFallback>
            </Avatar>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::avatar::*;

#[component]
pub fn AvatarAnatomy() -> impl IntoView {
    view! {
        <Avatar>
            <AvatarImage />
            <AvatarFallback />
        </Avatar>
    }
}

API Reference

Avatar

Contains the contents of an avatar.

Implements global attributes.

AvatarFallback

Renders a text fallback inside the avatar.

Implements global attributes.

AvatarImage

Renders an image inside the avatar.

Implements global and img attributes.