mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
pref: nav
This commit is contained in:
luoxiao
parent
4bda29d741
commit
75a926e6b2
7 changed files with 92 additions and 259 deletions
|
|
@ -139,10 +139,26 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/accordion".into(),
|
||||
label: "Accordion".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/alert".into(),
|
||||
label: "Alert".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/anchor".into(),
|
||||
label: "Anchor".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/auto-complete".into(),
|
||||
label: "Auto Complete".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/avatar".into(),
|
||||
label: "Avatar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/back-top".into(),
|
||||
label: "Back Top".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/badge".into(),
|
||||
label: "Badge".into(),
|
||||
|
|
@ -155,10 +171,22 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/button".into(),
|
||||
label: "Button".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/calendar".into(),
|
||||
label: "Calendar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/card".into(),
|
||||
label: "Card".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/checkbox".into(),
|
||||
label: "Checkbox".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/color-picker".into(),
|
||||
label: "Color Picker".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/config-provider".into(),
|
||||
label: "Config Provider".into(),
|
||||
|
|
@ -171,14 +199,74 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/divider".into(),
|
||||
label: "Divider".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/drawer".into(),
|
||||
label: "Drawer".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/grid".into(),
|
||||
label: "Grid".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/icon".into(),
|
||||
label: "Icon".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/image".into(),
|
||||
label: "Image".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/input".into(),
|
||||
label: "Input".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/layout".into(),
|
||||
label: "Layout".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/loading-bar".into(),
|
||||
label: "Loading Bar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/message".into(),
|
||||
label: "Message".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/modal".into(),
|
||||
label: "Modal".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/popover".into(),
|
||||
label: "Popover".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/progress".into(),
|
||||
label: "Progress".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/radio".into(),
|
||||
label: "Radio".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/scrollbar".into(),
|
||||
label: "Scrollbar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/select".into(),
|
||||
label: "Select".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/skeleton".into(),
|
||||
label: "Skeleton".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/slider".into(),
|
||||
label: "Slider".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/space".into(),
|
||||
label: "Space".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/spin-button".into(),
|
||||
label: "Spin Button".into(),
|
||||
|
|
@ -187,6 +275,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/spinner".into(),
|
||||
label: "Spinner".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/switch".into(),
|
||||
label: "Switch".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/tab-list".into(),
|
||||
label: "Tab List".into(),
|
||||
|
|
@ -211,102 +303,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
|||
value: "/components/time-picker".into(),
|
||||
label: "Time Picker".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/auto-complete".into(),
|
||||
label: "Auto Complete".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/color-picker".into(),
|
||||
label: "Color Picker".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/checkbox".into(),
|
||||
label: "Checkbox".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/input".into(),
|
||||
label: "Input".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/radio".into(),
|
||||
label: "Radio".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/select".into(),
|
||||
label: "Select".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/slider".into(),
|
||||
label: "Slider".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/switch".into(),
|
||||
label: "Switch".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/upload".into(),
|
||||
label: "Upload".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/calendar".into(),
|
||||
label: "Calendar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/image".into(),
|
||||
label: "Image".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/anchor".into(),
|
||||
label: "Anchor".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/back-top".into(),
|
||||
label: "Back Top".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/loading-bar".into(),
|
||||
label: "Loading Bar".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/alert".into(),
|
||||
label: "Alert".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/drawer".into(),
|
||||
label: "Drawer".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/message".into(),
|
||||
label: "Message".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/modal".into(),
|
||||
label: "Modal".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/popover".into(),
|
||||
label: "Popover".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/progress".into(),
|
||||
label: "Progress".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/layout".into(),
|
||||
label: "Layout".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/grid".into(),
|
||||
label: "Grid".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/space".into(),
|
||||
label: "Space".into(),
|
||||
},
|
||||
MenuItemOption {
|
||||
value: "/components/scrollbar".into(),
|
||||
label: "Scrollbar".into(),
|
||||
},
|
||||
],
|
||||
},
|
||||
MenuGroupOption {
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
.thaw-menu-group {
|
||||
padding: 0.85rem 1.15em 0.1rem;
|
||||
font-size: 0.86rem;
|
||||
font-weight: bold;
|
||||
color: var(--thaw-font-color);
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.thaw-menu-item__content {
|
||||
margin: 0.3rem 0.4rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--thaw-font-color);
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
|
||||
transition-property: color, background-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.thaw-menu-item__content:hover:not(.thaw-menu-item__content--selected) {
|
||||
background-color: var(--thaw-background-color-hover);
|
||||
}
|
||||
|
||||
.thaw-menu-item__content--selected {
|
||||
color: var(--thaw-font-color-active);
|
||||
background-color: var(--thaw-background-color);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
use crate::{theme::use_theme, Theme};
|
||||
use leptos::*;
|
||||
use thaw_utils::{class_list, mount_style, OptionalProp};
|
||||
|
||||
#[component]
|
||||
pub fn MenuGroup(
|
||||
#[prop(into)] label: String,
|
||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("menu-group", include_str!("./menu-group.css"));
|
||||
let theme = use_theme(Theme::light);
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.group_color));
|
||||
});
|
||||
css_vars
|
||||
});
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=class_list!["thaw-menu-group", class.map(| c | move || c.get())]
|
||||
style=move || css_vars.get()
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
{children()}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
use super::use_menu;
|
||||
use crate::{theme::use_theme, Theme};
|
||||
use leptos::*;
|
||||
use thaw_utils::{class_list, mount_style, OptionalProp};
|
||||
|
||||
#[component]
|
||||
pub fn MenuItem(
|
||||
#[prop(into)] key: MaybeSignal<String>,
|
||||
#[prop(into)] label: MaybeSignal<String>,
|
||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||
) -> impl IntoView {
|
||||
mount_style("menu-item", include_str!("./menu-item.css"));
|
||||
let theme = use_theme(Theme::light);
|
||||
let menu = use_menu();
|
||||
let click_key = key.clone();
|
||||
let on_click = move |_| {
|
||||
let click_key = click_key.get();
|
||||
if menu.0.with(|key| key != &click_key) {
|
||||
menu.0.set(click_key);
|
||||
}
|
||||
};
|
||||
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
let font_color = theme.common.color_primary.clone();
|
||||
css_vars.push_str(&format!("--thaw-font-color-active: {font_color};"));
|
||||
css_vars.push_str(&format!("--thaw-font-color: {};", theme.menu.color));
|
||||
css_vars.push_str(&format!("--thaw-background-color: {font_color}1a;"));
|
||||
css_vars.push_str(&format!(
|
||||
"--thaw-background-color-hover: {};",
|
||||
theme.menu.item_color_hover
|
||||
));
|
||||
});
|
||||
css_vars
|
||||
});
|
||||
|
||||
view! {
|
||||
<div class="thaw-menu-item">
|
||||
<div
|
||||
class=class_list![
|
||||
"thaw-menu-item__content", ("thaw-menu-item__content--selected", move || menu.0
|
||||
.get() == key.get()), class.map(| c | move || c.get())
|
||||
]
|
||||
|
||||
on:click=on_click
|
||||
style=move || css_vars.get()
|
||||
>
|
||||
{move || label.get()}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
mod menu_group;
|
||||
mod menu_item;
|
||||
mod theme;
|
||||
|
||||
pub use menu_group::MenuGroup;
|
||||
pub use menu_item::*;
|
||||
pub use theme::MenuTheme;
|
||||
|
||||
use leptos::*;
|
||||
use thaw_utils::{class_list, Model, OptionalProp};
|
||||
|
||||
#[component]
|
||||
pub fn Menu(
|
||||
#[prop(optional, into)] value: Model<String>,
|
||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<Provider value=MenuInjection(value)>
|
||||
<div class=class_list!["thaw-menu", class.map(| c | move || c.get())]>{children()}</div>
|
||||
</Provider>
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
pub(crate) struct MenuInjection(pub Model<String>);
|
||||
|
||||
pub(crate) fn use_menu() -> MenuInjection {
|
||||
expect_context()
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
use crate::theme::ThemeMethod;
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct MenuTheme {
|
||||
pub color: String,
|
||||
pub item_color_hover: String,
|
||||
pub group_color: String,
|
||||
}
|
||||
|
||||
impl ThemeMethod for MenuTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
color: "#4b5263".into(),
|
||||
item_color_hover: "#f3f5f6".into(),
|
||||
group_color: "#111727".into(),
|
||||
}
|
||||
}
|
||||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
color: "#9ca5b0".into(),
|
||||
item_color_hover: "#383f5233".into(),
|
||||
group_color: "#ffffffe6".into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue