adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: MenuItem adds icon prop (#200)

Browse source
This commit is contained in:
luoxiaozero 2024-05-23 23:06:01 +08:00 • committed by GitHub
parent 5320793ca9
commit cb37d9cfe9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo_markdown/docs/menu/mod.md
View file

@ -5,8 +5,12 @@ let value = create_rw_signal(String::from("o"));
view! { view! {
<Menu value> <Menu value>
<MenuItem key="a" label="and"/> <MenuItem key="a" label="And"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="Or"/>
<MenuItem icon=icondata::AiAreaChartOutlined key="area" label="Area Chart"/>
<MenuItem icon=icondata::AiPieChartOutlined key="pie" label="Pie Chart"/>
<MenuItem icon=icondata::AiGithubOutlined key="github" label="Github"/>
<MenuItem icon=icondata::AiChromeOutlined key="chrome" label="Chrome"/>
</Menu> </Menu>
} }
``` ```
@ -29,8 +33,9 @@ view! {
### MenuItem Props ### MenuItem Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ----- | ----------------------------------- | -------------------- | -------------------------------------------- | | --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. | | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. |
| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. | | label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
| key | `MaybeSignal<String>` | `Default::default()` | The indentifier of the menu item. | | key | `MaybeSignal<String>` | `Default::default()` | The indentifier of the menu item. |
| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the menu item. |

2
thaw/src/menu/menu-item.css
View file

@ -1,4 +1,6 @@
.thaw-menu-item__content { .thaw-menu-item__content {
display: flex;
align-items: center;
margin: 0.3rem 0.4rem; margin: 0.3rem 0.4rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
color: var(--thaw-font-color); color: var(--thaw-font-color);

15
thaw/src/menu/menu_item.rs
View file

@ -1,11 +1,13 @@
use super::use_menu; use super::use_menu;
use crate::{theme::use_theme, Theme}; use crate::{theme::use_theme, Icon, Theme};
use leptos::*; use leptos::*;
use thaw_utils::{class_list, mount_style, OptionalProp}; use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
#[component] #[component]
pub fn MenuItem( pub fn MenuItem(
#[prop(into)] key: MaybeSignal<String>, #[prop(into)] key: MaybeSignal<String>,
#[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
#[prop(into)] label: MaybeSignal<String>, #[prop(into)] label: MaybeSignal<String>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
) -> impl IntoView { ) -> impl IntoView {
@ -46,6 +48,15 @@ pub fn MenuItem(
on:click=on_click on:click=on_click
style=move || css_vars.get() style=move || css_vars.get()
> >
{
move || {
view! {
<OptionComp value=icon.get() let:icon>
<Icon icon=icon style="font-size: 18px;margin-right: 8px"/>
</OptionComp>
}
}
}
{move || label.get()} {move || label.get()}
</div> </div>
</div> </div>

4
thaw/src/select/raw.rs
View file

@ -50,6 +50,10 @@ where
}); });
on_cleanup(move || listener.remove()); on_cleanup(move || listener.remove());
} }
#[cfg(not(any(feature = "csr", feature = "hydrate")))]
{
let _ = hide_menu;
}
let theme = use_theme(Theme::light); let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {