diff --git a/examples/Cargo.lock b/examples/Cargo.lock index 000cc51..d1c5cef 100644 --- a/examples/Cargo.lock +++ b/examples/Cargo.lock @@ -54,6 +54,9 @@ dependencies = [ name = "basics" version = "0.2.0" dependencies = [ + "gloo-console 0.3.0", + "wasm-bindgen", + "web-sys", "yew", "yew-bootstrap", ] diff --git a/examples/basics/Cargo.toml b/examples/basics/Cargo.toml index ff53be8..40687c5 100644 --- a/examples/basics/Cargo.toml +++ b/examples/basics/Cargo.toml @@ -6,5 +6,8 @@ edition = "2021" license = "MIT" [dependencies] +gloo-console = "0.3.0" yew = { version = "0.21", features = ["csr"] } -yew-bootstrap = { path = "../../packages/yew-bootstrap" } \ No newline at end of file +yew-bootstrap = { path = "../../packages/yew-bootstrap" } +wasm-bindgen = "0.2.*" +web-sys = { version = "0.3.*", features = ["Event", "HtmlElement"] } diff --git a/examples/basics/src/main.rs b/examples/basics/src/main.rs index 7b568bb..98e4602 100644 --- a/examples/basics/src/main.rs +++ b/examples/basics/src/main.rs @@ -3,6 +3,9 @@ use yew::prelude::*; use yew_bootstrap::component::*; use yew_bootstrap::icons::*; use yew_bootstrap::util::*; +use gloo_console::debug; +use wasm_bindgen::JsCast; +use web_sys::HtmlElement; enum Msg {} struct Model {} @@ -22,16 +25,32 @@ impl Component for Model { icon: BI::ROCKET, }; + // Show a message in the debug console whenever a NavItem or + // NavDropdownItem is clicked. + let onclick = Callback::from(move |event: MouseEvent| { + let Some(target) = event.target() else { + return; + }; + let Ok(target) = target.dyn_into::() else { + return; + }; + debug!("onclick for:", target.inner_text().trim()); + // Stop the browser from actually following the "#" link. + event.prevent_default(); + }); + html! { <> {include_inline()} {BIFiles::cdn()} - - - - - + + + + + + + @@ -45,7 +64,7 @@ impl Component for Model {
-

{ "Accordian" }

+

{ "Accordion" }

{"Some text inside "}{"THE BODY"}{" of the accordion item"}

diff --git a/packages/yew-bootstrap/src/component/navbar.rs b/packages/yew-bootstrap/src/component/navbar.rs index a974f8f..f3147ba 100644 --- a/packages/yew-bootstrap/src/component/navbar.rs +++ b/packages/yew-bootstrap/src/component/navbar.rs @@ -4,20 +4,30 @@ use crate::util::Dimension; use crate::icons::BI; /// # A singular dropdown item, child of [NavDropdown] -/// Used as a child of [NavDropdown] to create a dropdown menu. -/// +/// Used as a child of [NavDropdown] to create a dropdown menu. +/// /// See [NavDropdownItemProps] for a listing of properties. pub struct NavDropdownItem { } /// # Properties for [NavDropdown] -#[derive(Properties, Clone, PartialEq, Eq)] +#[derive(Properties, Clone, PartialEq)] pub struct NavDropdownItemProps { /// Item text #[prop_or_default] pub text: AttrValue, /// Link for the item #[prop_or_default] - pub url: AttrValue, + pub url: Option, + /// Callback when clicked. + /// + /// **Tip:** To make browsers show a "link" mouse cursor for the + /// [NavDropdownItem], set `url="#"` and call [`Event::prevent_default()`] + /// from your callback. + #[prop_or_default] + pub onclick: Callback, + /// Optional icon + #[prop_or_default] + pub icon: Option<&'static BI>, } impl Component for NavDropdownItem { @@ -33,7 +43,16 @@ impl Component for NavDropdownItem { html! {
  • - {props.text.clone()} + + if let Some(icon) = props.icon { + {icon}{" "} + } + {props.text.clone()} +
    • } } @@ -59,7 +78,10 @@ pub struct NavDropdownProps { pub text: AttrValue, /// Top level path is the currently active one #[prop_or_default] - pub active: bool + pub active: bool, + /// Optional icon + #[prop_or_default] + pub icon: Option<&'static BI>, } impl Component for NavDropdown { @@ -78,7 +100,7 @@ impl Component for NavDropdown { false => "false" }); - + let mut dropdown_toggle_classes = Classes::new(); dropdown_toggle_classes.push(String::from("nav-link")); dropdown_toggle_classes.push(String::from("dropdown-toggle")); @@ -90,6 +112,9 @@ impl Component for NavDropdown { html! {
  • + if let Some(icon) = props.icon { + {icon}{" "} + } {props.text.clone()}
      @@ -102,7 +127,7 @@ impl Component for NavDropdown { /// # Item of a [NavBar] /// This typically contains text inside a link -/// +/// /// Refer to [NavItemProperties] for a listing of properties pub struct NavItem { } @@ -126,7 +151,16 @@ pub struct NavItemProperties { pub id: AttrValue, /// dropdown items #[prop_or_default] - pub children: Children + pub children: Children, + /// Callback when clicked. + /// + /// **Tip:** To make browsers show a "link" mouse cursor for the [NavItem], + /// set `url="#"` and call [`Event::prevent_default()`] from your callback. + #[prop_or_default] + pub onclick: Callback, + /// Optional icon + #[prop_or_default] + pub icon: Option<&'static BI>, } impl Component for NavItem { @@ -157,7 +191,16 @@ impl Component for NavItem { true => { html! {
    • - + + if let Some(icon) = props.icon { + {icon}{" "} + } {props.text.clone()}
      • @@ -166,7 +209,14 @@ impl Component for NavItem { false => { html! {
    • - + + if let Some(icon) = props.icon { + {icon}{" "} + } {props.text.clone()}
      • @@ -179,40 +229,40 @@ impl Component for NavItem { { for props.children.iter() } - } + } } } } } /// # Brand type for a [NavBar] -/// +/// /// This can contain a text, icon, image or combined (text and image) #[derive(Clone, PartialEq, Eq)] pub enum BrandType { /// Text with optional link - BrandSimple { + BrandSimple { text: AttrValue, url: Option }, - /// a brand icon is a bootstrap icon, requiring bootstrap-icons to be imported; + /// a brand icon is a bootstrap icon, requiring bootstrap-icons to be imported; /// see [crate::icons] BrandIcon { icon: BI, text: AttrValue, url: Option }, /// Image with optional dimensions, link and descriptive text - BrandImage { + BrandImage { /// browser-accessible url to the brand image - image_url: AttrValue, + image_url: AttrValue, /// descriptive text for screen reader users - alt: AttrValue, + alt: AttrValue, dimension: Option }, /// Combined image and text with URL BrandCombined { - text: AttrValue, + text: AttrValue, /// hyperlink destination for brand text url: Option, /// browser-accessible url to the brand image - image_url: AttrValue, + image_url: AttrValue, /// descriptive text for screen reader users - alt: AttrValue, + alt: AttrValue, dimension: Option } } @@ -221,17 +271,17 @@ pub enum BrandType { /// The navbar is a responsive horizontal menu bar that can contain links, dropdowns, and text. /// We have broken up this component into several sub-components to make it easier to use: [NavItem], [NavDropdown], and [NavDropdownItem]. /// The brand property is set using the [BrandType] enum. -/// +/// /// See [NavBarProps] for more information on properties supported by this component. /// # Example /// ```rust /// use yew::prelude::*; /// use yew_bootstrap::component::{BrandType, NavBar, NavDropdownItem, NavItem}; -/// +/// /// fn test() -> Html { -/// let brand = BrandType::BrandSimple { -/// text: AttrValue::from("Yew Bootstrap"), -/// url: Some(AttrValue::from("https://yew.rs")) +/// let brand = BrandType::BrandSimple { +/// text: AttrValue::from("Yew Bootstrap"), +/// url: Some(AttrValue::from("https://yew.rs")) /// }; /// html!{ /// @@ -300,7 +350,7 @@ impl Component for NavBar { Some(b) => { match b { BrandType::BrandSimple{text, url} => { - let url = match url { + let url = match url { Some(u) => u.clone(), None => AttrValue::from("#") }; @@ -312,7 +362,7 @@ impl Component for NavBar { } }, BrandType::BrandIcon { text, icon, url } => { - let url = match url { + let url = match url { Some(u) => u.clone(), None => AttrValue::from("#") }; @@ -342,7 +392,7 @@ impl Component for NavBar { } } BrandType::BrandCombined { text, url, image_url, alt, dimension } => { - let url = match url { + let url = match url { Some(u) => u.clone(), None => AttrValue::from("#") };