freyr 0.2.8

A UI component library for Dioxus web.
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

use crate::assets::button_style::BUTTON_STYLES;
use crate::enums::basic_button_enums::{ButtonColor, ButtonProps, ButtonUrl};
use dioxus::prelude::*;

/// Defines which kind of button you want to use: Freyr, Primary, Success, Danger, Black or Transparent.
/// You may also add a route.
///
/// # Examples
///
/// Using a "Freyr", and a "Transparent" button:
///
/// ```rust
/// BasicButton { color: ButtonColor::Primary, label: String::from("Go Home"), link: ButtonUrl { url: "/".to_string() } };
///
/// // Here the routing is made optional
/// BasicButton { color: ButtonColor::Freyr, label: String::from("Hello") }
/// ```
///
/// Those buttons have arbitrary colors, that you may not customize to you wishes.
#[component]
pub fn BasicButton(color: ButtonColor, label: String, link: Option<ButtonUrl>) -> Element {
    let style_tag = rsx! {
        style { "{BUTTON_STYLES}" }
    };

    rsx! {
        div {
            {style_tag}
            if let Some(link) = link {
                Link { to: "{link.url}",
                    button { class: "{color.to_css_class()}", "{label}" }
                }
            } else {
                button { class: "{color.to_css_class()}", "{label}" }
            }
        }
    }
}

/// Usage of the button with an event attached to it:
///
/// ```rust
/// #[component]
/// pub fn Hero() -> Element {
///     let mut count = use_signal(|| 0);
///     let increment = move |_| count += 1;
///
///     rsx! {
///         div { class: "mt-20 w-full flex items-center justify-center",
///             EventButton {
///                 color: ButtonColor::Freyr,
///                 onclick: increment,
///                 label: String::from("Increment"),
///             }
///             div { class: "ml-4", "{count}" }
///         }
///     }
/// }
/// ```
#[component]
pub fn EventButton(props: ButtonProps) -> Element {
    let style_tag = rsx! {
        style { "{BUTTON_STYLES}" }
    };

    rsx! {
        div {
            {style_tag}
            button {
                class: "{props.color.to_css_class()}",
                onclick: move |evt| (props.onclick)(evt),
                {props.label}
            }
        }
    }
}