mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-12 21:49:49 -04:00
refactor: gh-pages
This commit is contained in:
parent
3be21b4e03
commit
a76079202e
10 changed files with 209 additions and 35 deletions
|
@ -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>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()));
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue