dioxus-element-plug 0.2.0

Element UI components for Dioxus applications with pure Rust styling system
Documentation 
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

use dioxus::prelude::*;

/// Avatar size variants
#[derive(Clone, PartialEq)]
pub enum AvatarSize {
    Large,
    Default,
    Small,
}

impl AvatarSize {
    pub fn as_class(&self) -> &'static str {
        match self {
            AvatarSize::Large => "el-avatar--large",
            AvatarSize::Default => "",
            AvatarSize::Small => "el-avatar--small",
        }
    }
}

/// Avatar shape variants
#[derive(Clone, PartialEq)]
pub enum AvatarShape {
    Circle,
    Square,
}

impl AvatarShape {
    pub fn as_class(&self) -> &'static str {
        match self {
            AvatarShape::Circle => "el-avatar--circle",
            AvatarShape::Square => "el-avatar--square",
        }
    }
}

/// Avatar fit type
#[derive(Clone, PartialEq)]
pub enum AvatarFit {
    Fill,
    Contain,
    Cover,
    None,
    ScaleDown,
}

impl AvatarFit {
    pub fn as_str(&self) -> &'static str {
        match self {
            AvatarFit::Fill => "fill",
            AvatarFit::Contain => "contain",
            AvatarFit::Cover => "cover",
            AvatarFit::None => "none",
            AvatarFit::ScaleDown => "scale-down",
        }
    }
}

/// Avatar props
#[derive(Props, Clone, PartialEq)]
pub struct AvatarProps {
    /// Avatar content (text or icon)
    #[props(default)]
    pub children: Option<Element>,

    /// Image source URL
    #[props(default)]
    pub src: Option<String>,

    /// Icon CSS class
    #[props(default)]
    pub icon: Option<String>,

    /// Avatar size
    #[props(default = AvatarSize::Default)]
    pub size: AvatarSize,

    /// Avatar shape
    #[props(default = AvatarShape::Circle)]
    pub shape: AvatarShape,

    /// Image fit type
    #[props(default = AvatarFit::Cover)]
    pub fit: AvatarFit,

    /// Additional CSS classes
    #[props(default)]
    pub class: Option<String>,

    /// Inline styles
    #[props(default)]
    pub style: Option<String>,
}

/// Avatar component for displaying user profiles or icons
///
/// ## Example
///
/// ```rust,ignore
/// rsx! {
///     Avatar { src: Some("user.jpg".to_string()), size: AvatarSize::Large }
///     Avatar { "U" }
/// }
/// ```
#[component]
pub fn Avatar(props: AvatarProps) -> Element {
    let mut class_names = vec!["el-avatar".to_string()];
    class_names.push(props.shape.as_class().to_string());

    let size_class = props.size.as_class();
    if !size_class.is_empty() {
        class_names.push(size_class.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();
    let fit_str = props.fit.as_str();

    rsx! {
        span {
            class: "{class_string}",
            style: "{style_string}",
            if let Some(ref src) = props.src {
                img {
                    class: "el-avatar__img",
                    src: "{src}",
                    style: "object-fit: {fit_str};",
                }
            } else if let Some(ref icon) = props.icon {
                i {
                    class: "{icon}"
                }
            } else {
                {props.children}
            }
        }
    }
}