Struct yew_styles::navbar::navbar_component::Navbar [−][src]
pub struct Navbar { pub link: ComponentLink<Self>, pub props: NavbarProps, pub display_menu: bool, }
Expand description
Navbar component
Features required
navbar
Example
use yew::prelude::*; use yew::services::ConsoleService; use yew_styles::{ navbar::{ navbar_component::{Fixed, Navbar}, navbar_container::NavbarContainer, navbar_item::NavbarItem, }, styles::{Palette, Style}, layouts::{ container::{JustifyContent, Mode}, }, }; pub struct App { link: ComponentLink<Self>, close_navbar_mobile: bool, } pub enum Msg { ChangeMenu(String), CloseNavarMobile(MouseEvent), } #[derive(Clone, Properties)] pub struct Props {} impl Component for App { type Message = Msg; type Properties = Props; fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self { App { link } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::ChangeMenu(menu) => { ConsoleService::log(&format!("{}", menu)); } Msg::CloseNavarMobile(mouse_event) => { let target_class = mouse_event .target() .unwrap() .dyn_into::<Element>() .unwrap() .class_list(); let target_parent = mouse_event .target() .unwrap() .dyn_into::<Element>() .unwrap() .parent_element() .unwrap() .tag_name(); if !target_class.value().contains("navbar-menu") && target_parent != "svg" { self.close_navbar_mobile = true; } else { self.close_navbar_mobile = false } } } false } fn change(&mut self, _props: Self::Properties) -> ShouldRender { false } fn view(&self) -> Html { html! { <div onclick=self.link.callback(|e| Msg::CloseNavarMobile(e))> <Navbar fixed=Fixed::None navbar_style=Style::Light navbar_palette=Palette::Info hide_navbar_items_mobile = self.close_navbar_mobile branch=html!{<img src="/assets/spielrs_logo.png"></img>}> <NavbarContainer justify_content=JustifyContent::FlexStart(Mode::NoMode)> <NavbarItem onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Home")))> <span>{"Home"}</span> </NavbarItem> <NavbarItem onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))> <span>{"Shop"}</span> </NavbarItem> <NavbarItem onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Shop")))> <span>{"Shop"}</span> </NavbarItem> <NavbarItem onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("About us")))> <span>{"About us"}</span> </NavbarItem> <NavbarItem onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from("Contact")))> <span>{"Contact"}</span> </NavbarItem> </NavbarContainer> </Navbar> </div> } } }
Fields
link: ComponentLink<Self>
props: NavbarProps
Trait Implementations
Messages are used to make Components dynamic and interactive. Simple
Component’s can declare their Message type to be ()
. Complex Component’s
commonly use an enum to declare multiple Message types. Read more
type Properties = Props
type Properties = Props
Properties are the inputs to a Component and should not mutated within a Component. They are passed to a Component using a JSX-style syntax. Read more
Components are created with their properties as well as a ComponentLink
which
can be used to send messages and create callbacks for triggering updates. Read more
Components handle messages in their update
method and commonly use this method
to update their state and (optionally) re-render themselves. Read more
The rendered
method is called after each time a Component is rendered but
before the browser updates the page. Read more
When the parent of a Component is re-rendered, it will either be re-created or
receive new properties in the change
lifecycle method. Component’s can choose
to re-render if the new properties are different than the previously
received properties. Most Component’s will use props with a PartialEq
impl and will be implemented like this: Read more
Components define their visual layout using a JSX-style syntax through the use of the
html!
procedural macro. The full guide to using the macro can be found in Yew’s
documentation. Read more
Auto Trait Implementations
impl !RefUnwindSafe for Navbar
impl !UnwindSafe for Navbar