dioxus_element_plug/components/
watermark.rs

1use dioxus::prelude::*;
2
3/// Watermark props
4#[derive(Props, Clone, PartialEq)]
5pub struct WatermarkProps {
6    #[props(default)]
7    pub children: Element,
8
9    /// Watermark text
10    pub content: String,
11
12    /// Font size
13    #[props(default = 16)]
14    pub font_size: u32,
15
16    /// Font color
17    #[props(default = "rgba(0,0,0,0.15)".to_string())]
18    pub font_color: String,
19
20    /// Gap between watermarks (X)
21    #[props(default = 100)]
22    pub gap_x: u32,
23
24    /// Gap between watermarks (Y)
25    #[props(default = 100)]
26    pub gap_y: u32,
27
28    /// Rotation angle
29    #[props(default = -22)]
30    pub rotate: i32,
31
32    /// Z-index
33    #[props(default = 9)]
34    pub z_index: u32,
35
36    #[props(default)]
37    pub class: Option<String>,
38
39    #[props(default)]
40    pub style: Option<String>,
41}
42
43/// Watermark component for overlaying watermark text
44#[component]
45pub fn Watermark(props: WatermarkProps) -> Element {
46    let watermark_style = format!(
47        "position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: {}; \
48        background-image: repeating-linear-gradient({}deg, transparent, transparent {}px, transparent {}px), \
49        repeating-linear-gradient(0deg, transparent, transparent {}px, transparent {}px); \
50        pointer-events: none; opacity: 0.5;",
51        props.z_index, props.rotate, props.gap_y, props.gap_y, props.gap_x, props.gap_x
52    );
53
54    let font_size = props.font_size;
55    let font_color = props.font_color.clone();
56
57    rsx! {
58        div {
59            class: "el-watermark {props.class.clone().unwrap_or_default()}",
60            style: "position: relative; {props.style.clone().unwrap_or_default()}",
61            {props.children}
62            div {
63                class: "el-watermark__overlay",
64                style: "{watermark_style}",
65                span {
66                    style: "font-size: {font_size}px; color: {font_color}; opacity: 0.3;",
67                    "{props.content}"
68                }
69            }
70        }
71    }
72}
dioxus_element_plug/components/watermark.rs

dioxus_element_plug/components/
watermark.rs
