refactor: gh-pages

This commit is contained in:
luoxiao 2023-09-21 22:59:35 +08:00
parent 3be21b4e03
commit a76079202e
10 changed files with 209 additions and 35 deletions

View file

@ -12,23 +12,19 @@ pub fn App() -> impl IntoView {
<Route path="/menu" view=MenuPage />
<Route path="/slider" view=SliderPage />
<Route path="/tabbar" view=TabbarPage />
<Route path="/nav-bar" view=|| view! {
<MobilePage path="/melt-ui?path=/mobile/nav-bar" />
} />
<Route path="/nav-bar" view=NavBarPage />
<Route path="/input" view=InputPage />
<Route path="/image" view=ImagePage />
<Route path="/modal" view=ModalPage />
<Route path="/button" view=ButtonPage />
<Route path="/checkbox" view=CheckboxPage />
<Route path="/toast" view=|| view! {
<MobilePage path="/melt-ui?path=/mobile/toast" />
} />
<Route path="/toast" view=ToastPage />
<Route path="/tabs" view=TabsPage />
<Route path="/select" view=SelectPage />
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage />
<Route path="/mobile/nav-bar" view=NavBarPage />
<Route path="/mobile/toast" view=ToastPage />
<Route path="/mobile/nav-bar" view=NavBarDemoPage />
<Route path="/mobile/toast" view=ToastDemoPage />
</Routes>
</Router>
}

View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -5,10 +7,24 @@ use melt_ui::*;
pub fn CheckboxPage() -> impl IntoView {
let checked = create_rw_signal(false);
view! {
<div>
<Checkbox checked>
"Click"
</Checkbox>
<div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1>
<Demo>
<Checkbox checked>
"Click"
</Checkbox>
<DemoCode slot>
{
indoc! {r#"
let checked = create_rw_signal(false);
<Checkbox checked>
"Click"
</Checkbox>
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -1,12 +1,25 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
#[component]
pub fn ImagePage() -> impl IntoView {
view! {
<>
<div style="width: 896px; margin: 0 auto;">
<h1>"Image"</h1>
<Demo>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
</>
<DemoCode slot>
{
indoc! {r#"
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -5,10 +7,22 @@ use melt_ui::*;
pub fn InputPage() -> impl IntoView {
let value = create_rw_signal(String::from("o"));
view! {
<>
{move || value.get()}
<Input value/>
<Input value type_=InputType::PASSWORD />
</>
<div style="width: 896px; margin: 0 auto;">
<h1>"Input"</h1>
<Demo>
<Input value/>
<Input value type_=InputType::PASSWORD />
<DemoCode slot>
{
indoc! {r#"
let value = create_rw_signal(String::from("o"));
<Input value/>
<Input value type_=InputType::PASSWORD />
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -5,11 +7,30 @@ use melt_ui::*;
pub fn ModalPage() -> impl IntoView {
let show = create_rw_signal(false);
view! {
<Button on:click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"sd"
</Modal>
<div style="width: 896px; margin: 0 auto;">
<h1>"Modal"</h1>
<Demo>
<Button on:click=move |_| show.set(true)>
"Open Modal"
</Button>
<Modal title="title" show>
"hello"
</Modal>
<DemoCode slot>
{
indoc! {r#"
let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)>
"open modal"
</Button>
<Modal title="title" show>
"hello"
</Modal>
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -1,8 +1,44 @@
use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*;
use melt_ui::mobile::NavBar;
#[component]
pub fn NavBarPage() -> impl IntoView {
view! {
<div style="display: flex">
<div style="width: 896px; margin: 0 auto;">
<h1>"Navbar"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
<NavBar
title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
/>
"#)
}
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/nav-bar" />
</div>
</div>
}
}
#[component]
pub fn NavBarDemoPage() -> impl IntoView {
let click_text = create_rw_signal(String::from("none"));
let click_left = SignalSetter::map(move |_| click_text.set("left".to_string()));

View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -10,6 +12,24 @@ pub fn SelectPage() -> impl IntoView {
value: String::from("apple"),
}];
view! {
<Select value=selected_value options/>
<div style="width: 896px; margin: 0 auto;">
<h1>"Select"</h1>
<Demo>
<Select value=selected_value options/>
<DemoCode slot>
{
indoc! {r#"
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
value: String::from("apple"),
}];
<Select value=selected_value options/>
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -36,7 +36,7 @@ pub fn TabbarPage() -> impl IntoView {
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/nav-bar" />
<MobilePage path="/melt-ui?path=/mobile/tabbar" />
</div>
</div>
}

View file

@ -1,3 +1,5 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*;
use melt_ui::*;
@ -5,13 +7,33 @@ use melt_ui::*;
pub fn TabsPage() -> impl IntoView {
let active_key = create_rw_signal("apple");
view! {
<Tabs active_key>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
<div style="width: 896px; margin: 0 auto;">
<h1>"Tabs"</h1>
<Demo>
<Tabs active_key>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
<DemoCode slot>
{
indoc! {r#"
let active_key = create_rw_signal("apple");
<Tabs active_key>
<Tab key="apple" label="Apple">
"apple"
</Tab>
<Tab key="pear" label="Pear">
"pear"
</Tab>
</Tabs>
"#}
}
</DemoCode>
</Demo>
</div>
}
}

View file

@ -1,3 +1,8 @@
use crate::{
components::{Demo, DemoCode},
pages::MobilePage,
};
use indoc::indoc;
use leptos::*;
use melt_ui::mobile::*;
use melt_ui::*;
@ -5,6 +10,37 @@ use std::time::Duration;
#[component]
pub fn ToastPage() -> impl IntoView {
view! {
<div style="display: flex">
<div style="width: 896px; margin: 0 auto;">
<h1>"Toast"</h1>
<Demo>
""
<DemoCode slot>
{
indoc!(r#"
let count = create_rw_signal(0u32);
let onclick = move |_| {
show_toast(ToastOptions {
message: format!("Hello {}", count.get_untracked()),
duration: Duration::from_millis(2000),
});
count.set(count.get_untracked() + 1);
};
"#)
}
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/toast" />
</div>
</div>
}
}
#[component]
pub fn ToastDemoPage() -> impl IntoView {
let count = create_rw_signal(0u32);
let onclick = move |_| {
show_toast(ToastOptions {