dioxus_element_plug/components/
avatar_group.rs

1use dioxus::prelude::*;
2
3/// AvatarGroup props
4#[derive(Props, Clone, PartialEq)]
5pub struct AvatarGroupProps {
6    /// Avatar group content
7    #[props(default)]
8    pub children: Element,
9
10    /// Maximum number of avatars to display
11    #[props(default)]
12    pub max: Option<u32>,
13
14    /// Size of avatars in the group
15    #[props(default)]
16    pub size: Option<String>,
17
18    /// Additional CSS classes
19    #[props(default)]
20    pub class: Option<String>,
21
22    /// Inline styles
23    #[props(default)]
24    pub style: Option<String>,
25}
26
27/// AvatarGroup component for displaying multiple avatars
28///
29/// ## Example
30///
31/// ```rust,ignore
32/// rsx! {
33///     AvatarGroup { max: Some(3),
34///         Avatar { src: Some("user1.jpg".to_string()) }
35///         Avatar { src: Some("user2.jpg".to_string()) }
36///         Avatar { src: Some("user3.jpg".to_string()) }
37///     }
38/// }
39/// ```
40#[component]
41pub fn AvatarGroup(props: AvatarGroupProps) -> Element {
42    let mut class_names = vec!["el-avatar-group".to_string()];
43
44    if let Some(ref custom_class) = props.class {
45        class_names.push(custom_class.clone());
46    }
47
48    let class_string = class_names.join(" ");
49    let style_string = props.style.clone().unwrap_or_default();
50
51    rsx! {
52        div {
53            class: "{class_string}",
54            style: "{style_string}",
55            {props.children}
56            if let Some(max) = props.max {
57                span {
58                    class: "el-avatar el-avatar--more",
59                    "+{max}"
60                }
61            }
62        }
63    }
64}
dioxus_element_plug/components/avatar_group.rs

dioxus_element_plug/components/
avatar_group.rs
