Avatar

An image element with a fallback for representing the user.

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.

PropTypeDefault
as_childMaybeProp<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.

PropTypeDefault
as_childMaybeProp<bool>false
on_loading_status_changeOption<Callback<ImageLoadingStatus>>-

Fallback

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.

PropTypeDefault
as_childMaybeProp<bool>false
delay_msMaybeProp<i32>-

Examples

TODO

See Also