mirror of
https://github.com/yewprint/yewprint
synced 2024-11-22 03:23:03 +00:00
Icons tweaks (#114)
This commit is contained in:
parent
1d87e39e87
commit
2e240fdb07
6 changed files with 67 additions and 38 deletions
|
@ -12,6 +12,7 @@ mod example;
|
|||
mod html_select;
|
||||
mod icon;
|
||||
mod input_group;
|
||||
mod logo;
|
||||
mod menu;
|
||||
mod panel_stack;
|
||||
mod progressbar;
|
||||
|
@ -27,6 +28,7 @@ mod tree;
|
|||
|
||||
pub use app::*;
|
||||
pub use example::*;
|
||||
pub use logo::*;
|
||||
|
||||
#[macro_export]
|
||||
macro_rules! log {
|
||||
|
|
37
yewprint-doc/src/logo.rs
Normal file
37
yewprint-doc/src/logo.rs
Normal file
|
@ -0,0 +1,37 @@
|
|||
use yew::prelude::*;
|
||||
|
||||
pub struct Logo {
|
||||
props: LogoProps,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct LogoProps {
|
||||
#[prop_or_default]
|
||||
pub class: Classes,
|
||||
}
|
||||
|
||||
impl Component for Logo {
|
||||
type Message = ();
|
||||
type Properties = LogoProps;
|
||||
|
||||
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
|
||||
Self { props }
|
||||
}
|
||||
|
||||
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
|
||||
todo!()
|
||||
}
|
||||
|
||||
fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
||||
if props != self.props {
|
||||
self.props = props;
|
||||
true
|
||||
} else {
|
||||
false
|
||||
}
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
crate::include_raw_html!("logo.svg", &self.props.class.to_string())
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
use crate::app::DocMenu;
|
||||
use crate::{DocMenu, Logo};
|
||||
use std::borrow::Cow;
|
||||
use yew::prelude::*;
|
||||
use yewprint::{Icon, IconName, Menu, MenuDivider, MenuItem};
|
||||
|
@ -33,7 +33,9 @@ impl Component for Example {
|
|||
<Menu>
|
||||
<MenuItem
|
||||
text={html!("Custom SVG icon")}
|
||||
// add the yewprint icon
|
||||
icon_html=html! {
|
||||
<Logo class=classes!("custom-icon") />
|
||||
}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
|
|
|
@ -3,7 +3,7 @@ mod example;
|
|||
use crate::ExampleContainer;
|
||||
use example::*;
|
||||
use yew::prelude::*;
|
||||
use yewprint::{Switch, H1, H5};
|
||||
use yewprint::H1;
|
||||
|
||||
pub struct PanelStackDoc {
|
||||
callback: Callback<ExampleProps>,
|
||||
|
@ -46,12 +46,7 @@ impl Component for PanelStackDoc {
|
|||
<div>
|
||||
<ExampleContainer
|
||||
source=source
|
||||
props=Some(html! {
|
||||
<PanelStackProps
|
||||
callback={self.callback.clone()}
|
||||
props=example_props.clone()
|
||||
/>
|
||||
})
|
||||
props=None
|
||||
>
|
||||
<Example with example_props />
|
||||
</ExampleContainer>
|
||||
|
@ -60,30 +55,3 @@ impl Component for PanelStackDoc {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
crate::build_example_prop_component! {
|
||||
PanelStackProps for ExampleProps =>
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<H5>{"Props"}</H5>
|
||||
<Switch
|
||||
onclick=self.update_props(|props, _| ExampleProps {
|
||||
animate: !props.animate,
|
||||
..props
|
||||
})
|
||||
checked=self.props.animate
|
||||
label=html!("Animate indicator")
|
||||
/>
|
||||
<Switch
|
||||
onclick=self.update_props(|props, _| ExampleProps {
|
||||
vertical: !props.vertical,
|
||||
..props
|
||||
})
|
||||
checked=self.props.vertical
|
||||
label=html!("Use vertical tabs")
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -113,6 +113,12 @@
|
|||
padding: 10px;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.custom-icon > svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
@ -81,7 +81,9 @@ pub struct MenuItemProps {
|
|||
#[prop_or_default]
|
||||
pub intent: Option<Intent>,
|
||||
#[prop_or_default]
|
||||
pub icon: IconName,
|
||||
pub icon: Option<IconName>,
|
||||
#[prop_or_default]
|
||||
pub icon_html: Option<Html>,
|
||||
#[prop_or_default]
|
||||
pub onclick: Callback<MouseEvent>,
|
||||
// TODO: pub children: html::Children,
|
||||
|
@ -124,7 +126,19 @@ impl Component for MenuItem {
|
|||
tabIndex={(!self.props.disabled).then(|| "0")}
|
||||
onclick={self.props.onclick.clone()}
|
||||
>
|
||||
<Icon icon={self.props.icon} />
|
||||
{
|
||||
if let Some(icon_name) = self.props.icon {
|
||||
html! {
|
||||
<Icon icon={icon_name} />
|
||||
}
|
||||
} else if let Some(html) = self.props.icon_html.clone() {
|
||||
html
|
||||
} else {
|
||||
html! {
|
||||
<Icon icon=IconName::Blank />
|
||||
}
|
||||
}
|
||||
}
|
||||
<div class=classes!("bp3-text", "bp3-fill", self.props.text_class.clone())>
|
||||
{self.props.text.clone()}
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue