dioxus_element_plug/components/
empty.rs

1use dioxus::prelude::*;
2
3/// Empty props
4#[derive(Props, Clone, PartialEq)]
5pub struct EmptyProps {
6    /// Image URL of empty state
7    #[props(default)]
8    pub image: Option<String>,
9
10    /// Image size (width) in pixels
11    #[props(default)]
12    pub image_size: Option<u32>,
13
14    /// Description text
15    #[props(default = "No Data".to_string())]
16    pub description: 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/// Empty component for displaying empty states
28///
29/// ## Example
30///
31/// ```rust,ignore
32/// rsx! {
33///     Empty { description: "No data found".to_string() }
34/// }
35/// ```
36#[component]
37pub fn Empty(props: EmptyProps) -> Element {
38    let mut class_names = vec!["el-empty".to_string()];
39    if let Some(ref custom_class) = props.class {
40        class_names.push(custom_class.clone());
41    }
42    let class_string = class_names.join(" ");
43
44    let image_style = props
45        .image_size
46        .map(|size| format!("width: {}px", size))
47        .unwrap_or_default();
48
49    rsx! {
50        div {
51            class: "{class_string}",
52            style: props.style.clone().unwrap_or_default(),
53            div {
54                class: "el-empty__image",
55                style: "{image_style}",
56                if let Some(ref img) = props.image {
57                    img { src: "{img}" }
58                } else {
59                    div {
60                        class: "el-empty__image-svg",
61                        style: "width: 100%; height: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; color: var(--el-text-color-secondary); opacity: 0.5;",
62                        "📭"
63                    }
64                }
65            }
66            p {
67                class: "el-empty__description",
68                "{props.description}"
69            }
70        }
71    }
72}
dioxus_element_plug/components/empty.rs

dioxus_element_plug/components/
empty.rs
