patternfly_yew/components/
avatar.rs

1//! Avatar graphic
2use crate::prelude::Size;
3use yew::prelude::*;
4
5/// Border style of the [`Avatar`] component
6#[derive(Clone, Default, Debug, PartialEq)]
7pub enum AvatarBorder {
8    #[default]
9    None,
10    Dark,
11    Light,
12}
13
14impl From<AvatarBorder> for Classes {
15    fn from(value: AvatarBorder) -> Self {
16        classes!(match value {
17            AvatarBorder::None => "",
18            AvatarBorder::Dark => "pf-m-dark",
19            AvatarBorder::Light => "pf-m-light",
20        })
21    }
22}
23
24/// Size of the [`Border`] component
25#[derive(Clone, Default, Debug, PartialEq)]
26pub enum AvatarSize {
27    #[default]
28    None,
29    Small,
30    Medium,
31    Large,
32    XLarge,
33}
34
35impl From<AvatarSize> for Classes {
36    fn from(value: AvatarSize) -> Self {
37        classes!(match value {
38            AvatarSize::None => Size::None,
39            AvatarSize::Small => Size::Small,
40            AvatarSize::Medium => Size::Medium,
41            AvatarSize::Large => Size::Large,
42            AvatarSize::XLarge => Size::XLarge,
43        })
44    }
45}
46
47/// Properties for [`Avatar`]
48#[derive(Clone, PartialEq, Properties)]
49pub struct AvatarProperties {
50    /// Required Attributes
51    /// The image "alt" text.
52    pub alt: AttrValue,
53
54    /// Optional Attributes
55    #[prop_or_default]
56    pub border: AvatarBorder,
57    #[prop_or_default]
58    pub class: Classes,
59    #[prop_or_default]
60    pub size: AvatarSize,
61    /// The source of the image.
62    #[prop_or_default]
63    pub src: AttrValue,
64}
65
66/// Avatar component
67///
68/// > An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
69///
70/// See: <https://www.patternfly.org/components/avatar>
71///
72/// ## Properties
73///
74/// Defined by [`AvatarProperties`].
75#[function_component(Avatar)]
76pub fn avatar(props: &AvatarProperties) -> Html {
77    html! {
78        <img
79            class={
80                classes!(
81                    "pf-v5-c-avatar",
82                    props.border.clone(),
83                    props.size.clone(),
84                    props.class.clone()
85                )
86            }
87            src={&props.src}
88            alt={&props.alt}
89        />
90    }
91}
patternfly_yew/components/avatar.rs

patternfly_yew/components/
avatar.rs
