Edit Component

Y Avatar Yew Usage

Adding Avatar to your project is simple:

1. Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.

2. Add the Avatar component to your dependencies by including it in your Cargo.toml file:

   cargo add avatar --features=yew
   

3. Import the Avatar, Image, and Fallback components into your Yew component and start using them in your app.

🛠️ Usage

Basic Avatar with Image

use avatar::yew::{Avatar, Image, Fallback};
use yew::prelude::*;

#[function_component(MyAvatar)]
pub fn my_avatar() -> Html {
    html! {
        <Avatar aria_label="Ferris Prophet">
            <Image src="https://i.pravatar.cc/300" alt="Ferris Prophet" />
            <Fallback>{"FP"}</Fallback>
        </Avatar>
    }
}

Initials Only (No Image)

use avatar::yew::{Avatar, Fallback};
use avatar::Color;
use yew::prelude::*;

#[function_component(InitialsAvatar)]
pub fn initials_avatar() -> Html {
    html! {
        <Avatar aria_label="Ferris Prophet">
            <Fallback color={Some(Color::Accent)}>{"FP"}</Fallback>
        </Avatar>
    }
}

Different Sizes

use avatar::yew::{Avatar, Fallback};
use avatar::{Color, Size};
use yew::prelude::*;

#[function_component(SizedAvatars)]
pub fn sized_avatars() -> Html {
    html! {
        <>
            <Avatar size={Size::Sm}><Fallback color={Some(Color::Success)}>{"SM"}</Fallback></Avatar>
            <Avatar size={Size::Md}><Fallback color={Some(Color::Warning)}>{"MD"}</Fallback></Avatar>
            <Avatar size={Size::Lg}><Fallback color={Some(Color::Danger)}>{"LG"}</Fallback></Avatar>
        </>
    }
}

Fallback Delay

Prevents a flash-of-fallback on fast image loads.

use avatar::yew::{Avatar, Image, Fallback};
use yew::prelude::*;

#[function_component(DelayedFallback)]
pub fn delayed_fallback() -> Html {
    html! {
        <Avatar aria_label="User">
            <Image src="https://i.pravatar.cc/300" alt="User" />
            <Fallback delay_ms={600}>{"US"}</Fallback>
        </Avatar>
    }
}

🔧 Props

Avatar

Image

Fallback

💡 Notes

• Image and Fallback must be used inside an Avatar component, they rely on its context.
• The fallback is shown until the image loads. Set delay_ms to prevent a flash on fast connections.
• Use Color and Variant props to match your design system.
• Looking for layered or clipped groups? Check out the Group API!

Usage

CLI Usage

You can import Avatar RS directly into your project to customize and modify it using the opensass cli:

os add avatar yew

use avatar::dioxus::{Avatar, Image, Fallback};
use dioxus::prelude::*;

fn MyAvatar() -> Element {
    rsx! {
        Avatar { aria_label: "Ferris Prophet",
            Image { src: "https://i.pravatar.cc/300", alt: "Ferris Prophet" }
            Fallback { "FP" }
        }
    }
}

use avatar::dioxus::{Avatar, Fallback};
use avatar::Color;
use dioxus::prelude::*;

fn InitialsAvatar() -> Element {
    rsx! {
        Avatar { aria_label: "Ferris Prophet",
            Fallback { color: Color::Accent, "FP" }
        }
    }
}

use avatar::dioxus::{Avatar, Fallback};
use avatar::{Color, Size};
use dioxus::prelude::*;

fn SizedAvatars() -> Element {
    rsx! {
        Avatar { size: Size::Sm, Fallback { color: Color::Success, "SM" } }
        Avatar { size: Size::Md, Fallback { color: Color::Warning, "MD" } }
        Avatar { size: Size::Lg, Fallback { color: Color::Danger, "LG" } }
    }
}

use avatar::dioxus::{Avatar, Image, Fallback};
use dioxus::prelude::*;

fn DelayedFallback() -> Element {
    rsx! {
        Avatar { aria_label: "User",
            Image { src: "https://i.pravatar.cc/300", alt: "User" }
            Fallback { delay_ms: 600, "US" }
        }
    }
}

os add avatar dio

use avatar::leptos::{Avatar, Image, Fallback};
use leptos::prelude::*;

#[component]
fn MyAvatar() -> impl IntoView {
    view! {
        <Avatar aria_label="Ferris Prophet">
            <Image src="https://i.pravatar.cc/300" alt="Ferris Prophet" />
            <Fallback>"FP"</Fallback>
        </Avatar>
    }
}

use avatar::leptos::{Avatar, Fallback};
use avatar::Color;
use leptos::prelude::*;

#[component]
fn InitialsAvatar() -> impl IntoView {
    view! {
        <Avatar aria_label="Ferris Prophet">
            <Fallback color=Color::Accent>"FP"</Fallback>
        </Avatar>
    }
}

use avatar::leptos::{Avatar, Fallback};
use avatar::{Color, Size};
use leptos::prelude::*;

#[component]
fn SizedAvatars() -> impl IntoView {
    view! {
        <Avatar size=Size::Sm><Fallback color=Color::Success>"SM"</Fallback></Avatar>
        <Avatar size=Size::Md><Fallback color=Color::Warning>"MD"</Fallback></Avatar>
        <Avatar size=Size::Lg><Fallback color=Color::Danger>"LG"</Fallback></Avatar>
    }
}

use avatar::leptos::{Avatar, Image, Fallback};
use leptos::prelude::*;

#[component]
fn DelayedFallback() -> impl IntoView {
    view! {
        <Avatar aria_label="User">
            <Image src="https://i.pravatar.cc/300" alt="User" />
            <Fallback delay_ms=600>"US"</Fallback>
        </Avatar>
    }
}

os add avatar lep