Avatar

An image element with a fallback for representing the user.

use leptos::*;
use radix_leptos_avatar::*;

#[component]
pub fn AvatarDemo() -> impl IntoView {
    view! {
        <div class="flex gap-5">
            <Avatar attr:class="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
                <AvatarImage
                    attr:class="h-full w-full rounded-[inherit] object-cover"
                    src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
                    attr:alt="Colm Tuite"
                />
                <AvatarFallback
                    attr:class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
                    delay_ms=600
                >
                    CT
                </AvatarFallback>
            </Avatar>
            <Avatar attr:class="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
                <AvatarImage
                    src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
                    attr:alt="Pedro Duarte"
                />
                <AvatarFallback
                    attr:class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
                    delay_ms=600
                >
                    PD
                </AvatarFallback>
            </Avatar>
            <Avatar attr:class="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
                <AvatarFallback attr:class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
                    PD
                </AvatarFallback>
            </Avatar>
        </div>
    }
}

Features

Automatic and manual control over when the image renders.
Fallback part accepts any children.
Optionally delay fallback rendering to avoid content flashing.

Installation

Install the component from your command line.

cargo add radix-leptos-avatar

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_avatar::*;

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

API Reference

Root

Contains all the parts of an avatar.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`

Image

The image to render. By default it will only render when it has loaded. You can use the on_loading_status_change handler if you need more control.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`on_loading_status_change`	`Option<Callback<ImageLoadingStatus>>`	-

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delay_ms prop to delay its rendering so it only renders for those with slower connections. For more control, use the on_loading_status_change handler on AvatarImage.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`delay_ms`	`MaybeProp<i32>`	-

Examples

TODO

Rust Radix