Mirrors/yewprint
2
0
Fork 0
mirror of https://github.com/yewprint/yewprint synced 2024-11-22 03:23:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve menu (#74)

Browse source 
* Made the example more like the one of blueprintjs

* Add the title props to the MenuDivider

* Add a labelElement and some label on the example Menu
This commit is contained in:
Yohan Boogaert 2020-12-04 16:57:27 +01:00 committed by GitHub
parent 0a0b0b2a94
commit 294be85104
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
yewprint-doc/src/menu/example.rs
View file

@ -1,5 +1,5 @@
use yew::prelude::*;
use yewprint::{IconName, Menu, MenuDivider, MenuItem};
use yewprint::{Icon, IconName, Menu, MenuDivider, MenuItem};
pub struct Example {}
@ -21,7 +21,7 @@ impl Component for Example {
fn view(&self) -> Html {
html! {
<div>
<>
<Menu>
<MenuItem
text={html!("Custom SVG icon")}
@ -29,25 +29,61 @@ impl Component for Example {
/>
<MenuDivider />
<MenuItem
text={html!{"New text box"}}
icon=IconName::NewTextBox
text={html!{"New text box"}}
/>
<MenuItem
text={html!{"New object"}}
icon=IconName::NewObject
text={html!{"New object"}}
/>
<MenuItem
text={html!{"New link"}}
icon=IconName::NewLink
text={html!{"New link"}}
/>
<MenuDivider />
<MenuItem
text={html!{"Settings"}}
icon=IconName::Cog
// add the label icon
text={html!{"Settings"}}
label=html! {
<Icon icon=IconName::Share />
}
/>
</Menu>
</div>
<Menu>
<MenuDivider title={html!("Edit")} />
<MenuItem
icon=IconName::Cut
text={html!("Cut")}
label={html!("Ctrl+X")}
/>
<MenuItem
icon=IconName::Duplicate
text={html!("Copy")}
label={html!("Ctrl+C")}
/>
<MenuItem
icon=IconName::Clipboard
text={html!("Paste")}
label={html!("Ctrl+V")}
disabled=true
/>
<MenuDivider title={html!("Text")} />
<MenuItem
icon=IconName::AlignLeft
text={html!("Alignment")}
disabled=false
/>
<MenuItem
icon=IconName::Style
text={html!("Style")}
/>
<MenuItem
icon=IconName::Asterisk
text={html!("Miscellaneous")}
/>
</Menu>
</>
}
}
}

44
yewprint/src/menu.rs
View file

@ -1,5 +1,4 @@
use crate::icon::{Icon, IconName};
use crate::Intent;
use crate::{Icon, IconName, Intent, H6};
use boolinator::Boolinator;
use yew::prelude::*;
@ -150,27 +149,52 @@ impl Component for MenuItem {
}
}
pub struct MenuDivider {}
pub struct MenuDivider {
props: MenuDividerProps,
}
#[derive(Clone, PartialEq, Properties)]
pub struct MenuDividerProps {
#[prop_or_default]
pub title: Option<yew::virtual_dom::VNode>,
}
impl Component for MenuDivider {
type Message = ();
type Properties = ();
type Properties = MenuDividerProps;
fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self {}
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self { props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if self.props != props {
self.props = props;
true
} else {
false
}
}
fn view(&self) -> Html {
html! {
<span class="bp3-menu-divider" />
if let Some(title) = self.props.title.clone() {
html! {
<li
class="bp3-menu-header"
>
<H6>{title}</H6>
</li>
}
} else {
html! {
<li class="bp3-menu-divider" />
}
}
}
}
}