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

feat: add guide

Browse source
This commit is contained in:
luoxiao 2023-11-08 11:02:38 +08:00
parent 636dcf7613
commit f59928fdb2
9 changed files with 206 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/Cargo.toml
View file

@ -12,6 +12,7 @@ thaw = { path = "../" }
icondata = { version = "0.1.0", features = [
"AiCloseOutlined",
"AiCheckOutlined",
"AiGithubOutlined",
] }
leptos_router = { version = "0.5.1", features = ["csr"] }
leptos_devtools = "0.0.1"

1
demo/gh-pages

@ -1 +0,0 @@
Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

4
demo/src/app.rs
View file

@ -43,6 +43,10 @@ fn TheRouter() -> impl IntoView {
<Router base="/thaw" set_is_routing>
<Routes base="/thaw".to_string()>
<Route path="/" view=Home/>
<Route path="/guide" view=GuidePage>
<Route path="/installation" view=InstallationPage/>
<Route path="/usage" view=UsagePage/>
</Route>
<Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage/>
<Route path="/slider" view=SliderPage/>

23
demo/src/components/site_header.rs
View file

@ -42,6 +42,24 @@ pub fn SiteHeader() -> impl IntoView {
</div>
</Space>
<Space>
<Button
variant=ButtonVariant::Text
on:click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
}
>
"Guide"
</Button>
<Button
variant=ButtonVariant::Text
on:click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}
>
"Components"
</Button>
<Button
variant=ButtonVariant::Text
on:click=on_theme
@ -50,12 +68,13 @@ pub fn SiteHeader() -> impl IntoView {
</Button>
<Button
variant=ButtonVariant::Text
icon=icondata::AiIcon::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"
on:click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
>
"Github"
</Button>
</Space>

22
demo/src/pages/guide/installation.rs Normal file
View file

@ -0,0 +1,22 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
#[component]
pub fn InstallationPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Installation"</h1>
<p>"Installation thaw"</p>
<Demo>
""
<DemoCode
slot
html="cargo add thaw"
>
""
</DemoCode>
</Demo>
</div>
}
}

97
demo/src/pages/guide/mod.rs Normal file
View file

@ -0,0 +1,97 @@
mod installation;
mod usage;
use crate::components::SiteHeader;
pub use installation::*;
use leptos::*;
use leptos_router::{use_location, use_navigate, Outlet};
use thaw::*;
pub use usage::*;
#[component]
pub fn GuidePage() -> impl IntoView {
let navigate = use_navigate();
let selected = create_rw_signal({
let loaction = use_location();
let mut pathname = loaction.pathname.get_untracked();
if pathname.starts_with("/thaw/guide/") {
pathname.drain(12..).collect()
} else {
String::new()
}
});
create_effect(move |value| {
let selected = selected.get();
if value.is_some() {
navigate(&format!("/guide/{selected}"), Default::default());
}
selected
});
view! {
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<LayoutSider>
<Menu value=selected>
{
gen_menu_data().into_view()
}
</Menu>
</LayoutSider>
<Layout style="padding: 8px 12px 28px; overflow-y: auto;">
<Outlet/>
</Layout>
</Layout>
</Layout>
}
}
struct MenuGroupOption {
label: String,
children: Vec<MenuItemOption>,
}
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
view! {
<MenuGroup label=label>
{
children.into_iter().map(|v| v.into_view()).collect_view()
}
</MenuGroup>
}
}
}
struct MenuItemOption {
label: String,
value: String,
}
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
view! {
<MenuItem key=value label/>
}
}
}
fn gen_menu_data() -> Vec<MenuGroupOption> {
vec![MenuGroupOption {
label: "Getting Started".into(),
children: vec![
MenuItemOption {
value: "installation".into(),
label: "Installation".into(),
},
MenuItemOption {
value: "usage".into(),
label: "Usage".into(),
},
],
}]
}

58
demo/src/pages/guide/usage.rs Normal file
View file

@ -0,0 +1,58 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
#[component]
pub fn UsagePage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Usage"</h1>
<p>"You just need to import thaw and use it."</p>
<Demo>
""
<DemoCode
slot
html=highlight_str!(
r#"
// Import all
use thaw::*;
// Import on Demand
use thaw::{Button, ButtonVariant};
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<p>"A small example:"</p>
<Demo>
""
<DemoCode
slot
html=highlight_str!(
r#"
use leptos::*;
use thaw::*;
fn main() {
mount_to_body(App)
}
#[component]
pub fn App() -> impl IntoView {
view! {
<Button variant=ButtonVariant::Primary>"Primary"</Button>
}
}
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
}
}

2
demo/src/pages/home.rs
View file

@ -20,7 +20,7 @@ pub fn Home() -> impl IntoView {
<Space>
<Button on_click=move |_| {
let navigate = use_navigate();
navigate("/components/menu", Default::default());
navigate("/components/button", Default::default());
}>"Read the docs"</Button>
<Button
variant=ButtonVariant::Text

2
demo/src/pages/mod.rs
View file

@ -10,6 +10,7 @@ mod color_picker;
mod components;
mod divider;
mod grid;
mod guide;
mod home;
mod icon;
mod image;
@ -46,6 +47,7 @@ pub use color_picker::*;
pub use components::*;
pub use divider::*;
pub use grid::*;
pub use guide::*;
pub use home::*;
pub use icon::*;
pub use image::*;