dioxus-material 0.3.0

Animation library for Dioxus
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

use crate::{use_theme, Ripple};
use dioxus::prelude::*;

/// Filled button component.
///
/// Buttons let people take action and make choices with one tap.
///
/// [material.io](https://m3.material.io/components/buttons)
///
/// ## Panics
/// This component requires access to a [`Theme`](crate::Theme).
///
/// ## Examples
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_material::{Button, Theme};
///
/// fn app() -> Element {
///    rsx!(Theme {
///         Button { onpress: |_| log::info!("clicked!"), "Click me!" } }
///    )
/// }
/// ```
#[component]
pub fn Button(
    /// Handler for button press events.
    onpress: EventHandler<Event<MouseData>>,

    /// Label child element.
    children: Element,

    /// Background color of the container (optional).
    background_color: Option<String>,

    /// Border radius of the container (optional).
    border_radius: Option<String>,

    /// Height of the container (optional).
    height: Option<String>,
) -> Element {
    let theme = use_theme();
    let background_color = background_color.as_deref().unwrap_or(&theme.primary_color);
    let border_radius = border_radius
        .as_deref()
        .unwrap_or(&theme.border_radius_medium);
    let height = height.as_deref().unwrap_or("50px");

    rsx!(
        div {
            display: "inline-block",
            position: "relative",
            height: "{height}",
            line_height: "{height}",
            color: "#fff",
            background: "{background_color}",
            border_radius: "{border_radius}",
            overflow: "hidden",
            cursor: "pointer",
            Ripple { onclick: move |event| onpress.call(event),
                div {
                    position: "relative",
                    z_index: 9,
                    padding: "0 25px",
                    font_family: "sans-serif",
                    user_select: "none",
                    webkit_user_select: "none",
                    {children}
                }
            }
        }
    )
}

#[component]
pub fn TextButton(
    /// Handler for button press events.
    onpress: EventHandler<Event<MouseData>>,

    /// Label child element.
    children: Element,

    /// Border radiusof the container (optional).
    border_radius: Option<String>,

    /// Text color (optional).
    color: Option<String>,

    /// Height of the container (optional).
    height: Option<String>,
) -> Element {
    let theme = use_theme();
    let color = color.as_deref().unwrap_or(&theme.primary_color);
    let border_radius = border_radius
        .as_deref()
        .unwrap_or(&theme.border_radius_medium);
    let height = height.as_deref().unwrap_or("40px");

    rsx!(
        div {
            display: "inline-block",
            position: "relative",
            height: "{height}",
            line_height: "{height}",
            border_radius: "{border_radius}",
            color: "{color}",
            font_weight: "bold",
            overflow: "hidden",
            cursor: "pointer",
            Ripple { onclick: move |event| onpress.call(event),
                div {
                    position: "relative",
                    z_index: 9,
                    padding: "0 25px",
                    font_family: "sans-serif",
                    user_select: "none",
                    webkit_user_select: "none",
                    {children}
                }
            }
        }
    )
}