2023-06-18 19:40:23 +08:00
|
|
|
use crate::components::SiteHeader;
|
2024-07-07 18:33:45 +08:00
|
|
|
use leptos::prelude::*;
|
2024-01-04 23:32:58 +08:00
|
|
|
use leptos_meta::Style;
|
2024-07-07 18:33:45 +08:00
|
|
|
use leptos_router::{
|
|
|
|
components::Outlet,
|
|
|
|
hooks::{use_location, use_navigate},
|
|
|
|
};
|
2023-11-05 16:03:58 +08:00
|
|
|
use thaw::*;
|
2023-06-13 12:43:15 +08:00
|
|
|
|
|
|
|
#[component]
|
2023-08-29 09:11:22 +08:00
|
|
|
pub fn ComponentsPage() -> impl IntoView {
|
|
|
|
let navigate = use_navigate();
|
2023-11-08 21:53:49 +08:00
|
|
|
let loaction = use_location();
|
2023-06-13 12:43:15 +08:00
|
|
|
|
2024-07-07 18:33:45 +08:00
|
|
|
let select_name = RwSignal::new(String::new());
|
2024-06-03 11:27:29 +08:00
|
|
|
Effect::new(move |_| {
|
|
|
|
select_name.set(loaction.pathname.get());
|
2023-06-13 12:43:15 +08:00
|
|
|
});
|
|
|
|
|
2023-11-08 21:53:49 +08:00
|
|
|
_ = select_name.watch(move |name| {
|
|
|
|
let pathname = loaction.pathname.get_untracked();
|
2024-06-03 11:27:29 +08:00
|
|
|
if &pathname != name {
|
|
|
|
navigate(name, Default::default());
|
2023-06-13 12:43:15 +08:00
|
|
|
}
|
|
|
|
});
|
2023-08-29 09:11:22 +08:00
|
|
|
view! {
|
2024-01-04 23:32:58 +08:00
|
|
|
<Style>
|
|
|
|
"
|
|
|
|
.demo-components__component {
|
|
|
|
width: 896px;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
2024-04-19 14:42:30 +08:00
|
|
|
.demo-components__toc {
|
|
|
|
width: 190px;
|
|
|
|
margin: 12px 2px 12px 12px;
|
|
|
|
}
|
|
|
|
.demo-components__toc > .thaw-anchor {
|
|
|
|
position: sticky;
|
|
|
|
top: 36px;
|
|
|
|
}
|
2024-01-04 23:32:58 +08:00
|
|
|
.demo-md-table-box {
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
2024-04-19 14:42:30 +08:00
|
|
|
.demo-components__toc,
|
2024-01-04 23:32:58 +08:00
|
|
|
.demo-components__sider {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.demo-components__component {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
"
|
|
|
|
</Style>
|
2023-10-16 21:15:43 +08:00
|
|
|
<Layout position=LayoutPosition::Absolute>
|
2023-10-08 09:28:13 +08:00
|
|
|
<SiteHeader/>
|
2024-07-07 18:33:45 +08:00
|
|
|
<Layout has_sider=true position=LayoutPosition::Absolute attr:style="top: 64px;">
|
2024-05-11 17:47:33 +08:00
|
|
|
<div class="demo-components__sider">
|
2024-05-11 15:53:37 +08:00
|
|
|
<NavDrawer selected_value=select_name>
|
2024-07-07 18:33:45 +08:00
|
|
|
{
|
|
|
|
gen_menu_data().into_iter().map(|data| {
|
|
|
|
let MenuGroupOption { label, children } = data;
|
|
|
|
view! {
|
2024-07-08 00:04:07 +08:00
|
|
|
<Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: inline-block">
|
2024-07-07 18:33:45 +08:00
|
|
|
{label}
|
|
|
|
</Caption1Strong>
|
|
|
|
{
|
|
|
|
children.into_iter().map(|item| {
|
|
|
|
let MenuItemOption { label, value } = item;
|
|
|
|
view! {
|
|
|
|
<NavItem value>{label}</NavItem>
|
|
|
|
}
|
|
|
|
}).collect_view()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).collect_view()
|
|
|
|
}
|
2024-05-11 15:53:37 +08:00
|
|
|
</NavDrawer>
|
2024-05-11 17:47:33 +08:00
|
|
|
</div>
|
2024-07-08 00:04:07 +08:00
|
|
|
<Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class="doc-content">
|
2023-10-08 09:28:13 +08:00
|
|
|
<Outlet/>
|
2023-06-18 19:40:23 +08:00
|
|
|
</Layout>
|
|
|
|
</Layout>
|
|
|
|
</Layout>
|
2023-06-13 12:43:15 +08:00
|
|
|
}
|
|
|
|
}
|
2023-10-15 15:43:02 +08:00
|
|
|
|
2023-11-08 17:27:01 +08:00
|
|
|
pub(crate) struct MenuGroupOption {
|
|
|
|
pub label: String,
|
|
|
|
pub children: Vec<MenuItemOption>,
|
2023-10-15 15:43:02 +08:00
|
|
|
}
|
|
|
|
|
2023-11-08 17:27:01 +08:00
|
|
|
pub(crate) struct MenuItemOption {
|
|
|
|
pub label: String,
|
|
|
|
pub value: String,
|
2023-10-15 15:43:02 +08:00
|
|
|
}
|
|
|
|
|
2023-11-08 17:27:01 +08:00
|
|
|
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
|
2023-10-15 15:43:02 +08:00
|
|
|
vec![
|
2024-06-03 11:27:29 +08:00
|
|
|
MenuGroupOption {
|
|
|
|
label: "Getting Started".into(),
|
|
|
|
children: vec![
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/guide/installation".into(),
|
|
|
|
label: "Installation".into(),
|
|
|
|
},
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/guide/usage".into(),
|
|
|
|
label: "Usage".into(),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
MenuGroupOption {
|
|
|
|
label: "Guides".into(),
|
|
|
|
children: vec![MenuItemOption {
|
|
|
|
value: "/guide/server-sider-rendering".into(),
|
|
|
|
label: "Server Sider Rendering".into(),
|
|
|
|
}],
|
|
|
|
},
|
|
|
|
MenuGroupOption {
|
|
|
|
label: "Development".into(),
|
|
|
|
children: vec![
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/guide/development/guide".into(),
|
|
|
|
label: "Guide".into(),
|
|
|
|
},
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/guide/development/components".into(),
|
|
|
|
label: "Components".into(),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuGroupOption {
|
2024-05-24 10:05:54 +08:00
|
|
|
label: "Components".into(),
|
2023-10-16 15:10:55 +08:00
|
|
|
children: vec![
|
2024-05-15 23:03:35 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/accordion".into(),
|
2024-05-15 23:03:35 +08:00
|
|
|
label: "Accordion".into(),
|
|
|
|
},
|
2024-06-26 22:12:28 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/anchor".into(),
|
|
|
|
label: "Anchor".into(),
|
|
|
|
},
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/auto-complete".into(),
|
|
|
|
label: "Auto Complete".into(),
|
|
|
|
},
|
2023-10-16 15:10:55 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/avatar".into(),
|
2023-10-16 15:10:55 +08:00
|
|
|
label: "Avatar".into(),
|
|
|
|
},
|
2024-06-26 22:12:28 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/back-top".into(),
|
|
|
|
label: "Back Top".into(),
|
|
|
|
},
|
2024-06-05 17:17:17 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/badge".into(),
|
|
|
|
label: "Badge".into(),
|
|
|
|
},
|
2024-06-04 10:13:37 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/breadcrumb".into(),
|
|
|
|
label: "Breadcrumb".into(),
|
|
|
|
},
|
2023-10-16 15:10:55 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/button".into(),
|
2023-10-16 15:10:55 +08:00
|
|
|
label: "Button".into(),
|
|
|
|
},
|
2024-06-26 22:12:28 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/calendar".into(),
|
|
|
|
label: "Calendar".into(),
|
|
|
|
},
|
2023-10-16 22:04:34 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/card".into(),
|
2023-10-16 22:04:34 +08:00
|
|
|
label: "Card".into(),
|
|
|
|
},
|
2024-06-26 22:12:28 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/checkbox".into(),
|
|
|
|
label: "Checkbox".into(),
|
|
|
|
},
|
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/color-picker".into(),
|
|
|
|
label: "Color Picker".into(),
|
|
|
|
},
|
2024-06-27 14:51:36 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/combobox".into(),
|
|
|
|
label: "Combobox".into(),
|
|
|
|
},
|
2024-05-24 10:05:54 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/config-provider".into(),
|
2024-05-24 10:05:54 +08:00
|
|
|
label: "Config Provider".into(),
|
|
|
|
},
|
2024-06-25 22:57:44 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/date-picker".into(),
|
|
|
|
label: "Date Picker".into(),
|
|
|
|
},
|
2024-06-28 15:54:20 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/dialog".into(),
|
|
|
|
label: "Dialog".into(),
|
|
|
|
},
|
2023-10-17 11:11:39 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/divider".into(),
|
2023-10-17 11:11:39 +08:00
|
|
|
label: "Divider".into(),
|
|
|
|
},
|
2023-10-18 23:49:27 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/drawer".into(),
|
|
|
|
label: "Drawer".into(),
|
2024-06-04 14:18:15 +08:00
|
|
|
},
|
2024-06-05 10:04:34 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/grid".into(),
|
|
|
|
label: "Grid".into(),
|
2024-06-05 10:04:34 +08:00
|
|
|
},
|
2024-06-06 10:53:04 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/icon".into(),
|
|
|
|
label: "Icon".into(),
|
2024-06-06 10:53:04 +08:00
|
|
|
},
|
2023-10-21 17:37:53 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/image".into(),
|
|
|
|
label: "Image".into(),
|
2023-10-21 17:37:53 +08:00
|
|
|
},
|
2023-11-20 21:00:13 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/input".into(),
|
|
|
|
label: "Input".into(),
|
2023-11-20 21:00:13 +08:00
|
|
|
},
|
2024-06-23 23:33:09 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/layout".into(),
|
|
|
|
label: "Layout".into(),
|
2024-06-23 23:33:09 +08:00
|
|
|
},
|
2024-06-25 23:42:53 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/loading-bar".into(),
|
|
|
|
label: "Loading Bar".into(),
|
2024-06-25 23:42:53 +08:00
|
|
|
},
|
2024-06-27 22:28:10 +08:00
|
|
|
// MenuItemOption {
|
|
|
|
// value: "/components/message".into(),
|
|
|
|
// label: "Message".into(),
|
|
|
|
// },
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuItemOption {
|
2024-06-27 22:28:10 +08:00
|
|
|
value: "/components/message-bar".into(),
|
|
|
|
label: "Message Bar".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/popover".into(),
|
|
|
|
label: "Popover".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
|
|
|
MenuItemOption {
|
2024-06-28 10:48:40 +08:00
|
|
|
value: "/components/progress-bar".into(),
|
|
|
|
label: "ProgressBar".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
2023-10-18 16:12:13 +08:00
|
|
|
MenuItemOption {
|
2024-06-03 11:27:29 +08:00
|
|
|
value: "/components/radio".into(),
|
2023-10-19 22:31:14 +08:00
|
|
|
label: "Radio".into(),
|
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/scrollbar".into(),
|
|
|
|
label: "Scrollbar".into(),
|
2023-12-05 19:24:20 +08:00
|
|
|
},
|
2024-06-27 20:28:55 +08:00
|
|
|
// MenuItemOption {
|
|
|
|
// value: "/components/select".into(),
|
|
|
|
// label: "Select".into(),
|
|
|
|
// },
|
2024-04-19 14:42:30 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/skeleton".into(),
|
|
|
|
label: "Skeleton".into(),
|
2024-04-19 14:42:30 +08:00
|
|
|
},
|
2024-04-16 23:00:01 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/slider".into(),
|
|
|
|
label: "Slider".into(),
|
2024-04-16 23:00:01 +08:00
|
|
|
},
|
2023-11-07 11:02:48 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/space".into(),
|
|
|
|
label: "Space".into(),
|
2023-11-07 11:02:48 +08:00
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/spin-button".into(),
|
|
|
|
label: "Spin Button".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
2024-01-07 19:20:08 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/spinner".into(),
|
|
|
|
label: "Spinner".into(),
|
2024-01-07 19:20:08 +08:00
|
|
|
},
|
2023-10-19 17:16:57 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/switch".into(),
|
|
|
|
label: "Switch".into(),
|
2023-10-19 17:16:57 +08:00
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/tab-list".into(),
|
|
|
|
label: "Tab List".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
2023-12-21 13:31:17 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/table".into(),
|
|
|
|
label: "Table".into(),
|
2023-12-21 13:31:17 +08:00
|
|
|
},
|
2023-11-15 17:50:16 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/tag".into(),
|
|
|
|
label: "Tag".into(),
|
2023-11-15 17:50:16 +08:00
|
|
|
},
|
2023-11-08 22:35:00 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/text".into(),
|
|
|
|
label: "Text".into(),
|
2023-11-08 22:35:00 +08:00
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/textarea".into(),
|
|
|
|
label: "Textarea".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/time-picker".into(),
|
|
|
|
label: "Time Picker".into(),
|
2023-10-15 15:43:02 +08:00
|
|
|
},
|
2024-07-02 17:20:58 +08:00
|
|
|
MenuItemOption {
|
|
|
|
value: "/components/toast".into(),
|
|
|
|
label: "Toast".into(),
|
|
|
|
},
|
2024-06-03 16:31:32 +08:00
|
|
|
MenuItemOption {
|
2024-06-26 22:12:28 +08:00
|
|
|
value: "/components/upload".into(),
|
|
|
|
label: "Upload".into(),
|
2024-06-03 16:31:32 +08:00
|
|
|
},
|
2023-10-15 15:43:02 +08:00
|
|
|
],
|
|
|
|
},
|
2024-06-26 22:32:13 +08:00
|
|
|
// MenuGroupOption {
|
|
|
|
// label: "Mobile Components".into(),
|
|
|
|
// children: vec![
|
|
|
|
// MenuItemOption {
|
|
|
|
// value: "/components/nav-bar".into(),
|
|
|
|
// label: "Nav Bar".into(),
|
|
|
|
// },
|
|
|
|
// MenuItemOption {
|
|
|
|
// value: "/components/tabbar".into(),
|
|
|
|
// label: "Tabbar".into(),
|
|
|
|
// },
|
|
|
|
// MenuItemOption {
|
|
|
|
// value: "/components/toast".into(),
|
|
|
|
// label: "Toast".into(),
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// },
|
2023-10-15 15:43:02 +08:00
|
|
|
]
|
|
|
|
}
|