jinya_ui/widgets/
floating_action_button.rs

1use yew::{Component, ComponentLink, Html};
2use yew::prelude::*;
3
4pub fn get_css<'a>() -> &'a str {
5    // language=CSS
6    "
7.jinya-floating-action-button {
8    box-sizing: border-box;
9    border-radius: 50%;
10    transition: background 0.3s, color 0.3s;
11    border: 2px solid var(--primary-color);
12    font-size: 2rem;
13    width: 4rem;
14    height: 4rem;
15    cursor: pointer;
16    background: var(--primary-color);
17    color: var(--white);
18    position: fixed;
19    right: 3rem;
20    bottom: 3rem;
21}
22
23.jinya-floating-action-button:hover {
24    background: var(--white);
25    color: var(--primary-color);
26}
27"
28}
29
30pub type Fab = FloatingActionButton;
31
32pub struct FloatingActionButton {
33    link: ComponentLink<Self>,
34    icon: String,
35    on_click: Callback<()>,
36}
37
38#[derive(Clone, PartialEq, Properties)]
39pub struct FloatingActionButtonProps {
40    pub icon: String,
41    pub on_click: Callback<()>,
42}
43
44pub enum Msg {
45    Click
46}
47
48impl FloatingActionButton {
49    fn get_icon_class(&self) -> String {
50        format!("mdi mdi-{}", self.icon)
51    }
52}
53
54impl Component for FloatingActionButton {
55    type Message = Msg;
56    type Properties = FloatingActionButtonProps;
57
58    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
59        FloatingActionButton {
60            link,
61            icon: props.icon,
62            on_click: props.on_click,
63        }
64    }
65
66    fn update(&mut self, msg: Self::Message) -> bool {
67        match msg {
68            Msg::Click => {
69                self.on_click.emit(());
70            }
71        }
72
73        false
74    }
75
76    fn change(&mut self, _props: Self::Properties) -> bool {
77        self.icon = _props.icon;
78        self.on_click = _props.on_click;
79
80        true
81    }
82
83    fn view(&self) -> Html {
84        html! {
85            <button onclick=self.link.callback(|_| Msg::Click) class="jinya-floating-action-button">
86                <span class=self.get_icon_class()></span>
87            </button>
88        }
89    }
90}
jinya_ui/widgets/floating_action_button.rs

jinya_ui/widgets/
floating_action_button.rs
