material_yew/
top_app_bar.rs

1mod action_items;
2mod navigation_icon;
3mod title;
4
5pub use action_items::*;
6pub use navigation_icon::*;
7pub use title::*;
8
9use crate::bool_to_option;
10use gloo::events::EventListener;
11use wasm_bindgen::prelude::*;
12use web_sys::Element;
13use yew::prelude::*;
14
15#[wasm_bindgen(module = "/build/mwc-top-app-bar.js")]
16extern "C" {
17    #[derive(Debug)]
18    type TopAppBar;
19
20    #[wasm_bindgen(getter, static_method_of = TopAppBar)]
21    fn _dummy_loader() -> JsValue;
22}
23
24loader_hack!(TopAppBar);
25
26/// The `mwc-top-app-bar` component
27///
28/// [MWC Documentation](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/top-app-bar)
29pub struct MatTopAppBar {
30    node_ref: NodeRef,
31    nav_listener: Option<EventListener>,
32}
33
34/// Props for [`MatTopAppBar`]
35///
36/// MWC Documentation:
37///
38/// - [Properties](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/top-app-bar#propertiesattributes)
39/// - [Events](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/top-app-bar#events)
40#[derive(Debug, Properties, PartialEq, Clone)]
41pub struct TopAppBarProps {
42    pub children: Children,
43    #[prop_or_default]
44    pub center_title: bool,
45    #[prop_or_default]
46    pub dense: bool,
47    #[prop_or_default]
48    pub prominent: bool,
49    /// Binds to `MDCTopAppBar:nav`
50    ///
51    /// See events docs to learn more.
52    #[prop_or_default]
53    pub onnavigationiconclick: Callback<()>,
54}
55
56impl Component for MatTopAppBar {
57    type Message = ();
58    type Properties = TopAppBarProps;
59
60    fn create(_: &Context<Self>) -> Self {
61        TopAppBar::ensure_loaded();
62        Self {
63            node_ref: NodeRef::default(),
64            nav_listener: None,
65        }
66    }
67
68    fn view(&self, ctx: &Context<Self>) -> Html {
69        let props = ctx.props();
70        html! {
71             <mwc-top-app-bar
72                 centerTitle={bool_to_option(props.center_title)}
73                 dense={bool_to_option(props.dense)}
74                 prominent={bool_to_option(props.prominent)}
75                 ref={self.node_ref.clone()}
76             >
77                 {props.children.clone()}
78             </mwc-top-app-bar>
79        }
80    }
81
82    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
83        let props = ctx.props();
84
85        if self.nav_listener.is_none() {
86            let callback = props.onnavigationiconclick.clone();
87            let element = self.node_ref.cast::<Element>().unwrap();
88
89            self.nav_listener = Some(EventListener::new(
90                &element,
91                "MDCTopAppBar:nav",
92                move |_| {
93                    callback.emit(());
94                },
95            ));
96        }
97    }
98}
material_yew/top_app_bar.rs

material_yew/
top_app_bar.rs
