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