An image element with a fallback for representing the user.
Leptos
Yew
avatar.rs
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>
}
}
avatar.rs
use radix_yew_avatar::*;
use yew::prelude::*;
#[function_component]
pub fn AvatarDemo() -> Html {
html! {
<div class="flex gap-5">
<Avatar class="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
<AvatarImage
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"
alt="Colm Tuite"
/>
<AvatarFallback
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 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"
alt="Pedro Duarte"
/>
<AvatarFallback
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 class="bg-blackA1 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
<AvatarFallback class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
{"PD"}
</AvatarFallback>
</Avatar>
</div>
}
}
Automatic and manual control over when the image renders.
Fallback part accepts any children.
Optionally delay fallback rendering to avoid content flashing.
Install the component from your command line.
Leptos
Yew
cargo add radix-leptos-avatar
cargo add radix-yew-avatar
Import all parts and piece them together.
Leptos
Yew
use leptos::*;
use radix_leptos_avatar::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<Avatar>
<AvatarImage />
<AvatarFallback />
</Avatar>
}
}
use radix_yew_avatar::*;
use yew::prelude::*;
#[function_component]
fn Anatomy() -> Html {
html! {
<Avatar>
<AvatarImage />
<AvatarFallback />
</Avatar>
}
}
Contains all the parts of an avatar.
Leptos
Yew
Prop Type Default
as_child
MaybeProp<bool>
false
Prop Type Default
as_child
Option<Callback<AvatarChildProps, Html>>
-
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.
Leptos
Yew
Prop Type Default
as_child
MaybeProp<bool>
false
on_loading_status_change
Option<Callback<ImageLoadingStatus>>
-
Prop Type Default
as_child
Option<Callback<AvatarImageChildProps, Html>>
-
on_loading_status_change
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
.
Leptos
Yew
Prop Type Default
as_child
MaybeProp<bool>
false
delay_ms
MaybeProp<i32>
-
Prop Type Default
as_child
Option<Callback<AvatarFallbackChildProps, Html>>
-
delay_ms
Option<i32>
-
TODO