mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
feat(gh-pages): code highlighter
This commit is contained in:
parent
cedd443a79
commit
a0927412df
17 changed files with 198 additions and 229 deletions
|
@ -13,9 +13,9 @@ icondata = { version = "0.0.7", features = [
|
||||||
"AiCheckOutlined",
|
"AiCheckOutlined",
|
||||||
] }
|
] }
|
||||||
leptos_router = { version = "0.5.0", features = ["csr"] }
|
leptos_router = { version = "0.5.0", features = ["csr"] }
|
||||||
indoc = "2.0.1"
|
|
||||||
regex = "1.8.2"
|
regex = "1.8.2"
|
||||||
leptos_devtools = "0.0.1"
|
leptos_devtools = "0.0.1"
|
||||||
|
prisms = { git = "https://github.com/luoxiaozero/prisms" }
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
tracing = ["leptos/tracing"]
|
tracing = ["leptos/tracing"]
|
||||||
|
|
|
@ -1,20 +1,23 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::Code;
|
use melt_ui::{mount_style, Code};
|
||||||
|
|
||||||
#[slot]
|
#[slot]
|
||||||
pub struct DemoCode {
|
pub struct DemoCode {
|
||||||
|
#[prop(optional)]
|
||||||
|
html: &'static str,
|
||||||
children: Children,
|
children: Children,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
||||||
|
mount_style("demo", || ("", prisms::prism_css!()));
|
||||||
view! {
|
view! {
|
||||||
<div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
|
<div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
|
||||||
{ children() }
|
{ children() }
|
||||||
</div>
|
</div>
|
||||||
<div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
|
<div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
|
||||||
<Code>
|
<Code>
|
||||||
<pre style="margin: 0">
|
<pre style="margin: 0" inner_html=demo_code.html>
|
||||||
{ (demo_code.children)() }
|
{ (demo_code.children)() }
|
||||||
</pre>
|
</pre>
|
||||||
</Code>
|
</Code>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ButtonPage() -> impl IntoView {
|
pub fn ButtonPage() -> impl IntoView {
|
||||||
|
@ -21,23 +21,21 @@ pub fn ButtonPage() -> impl IntoView {
|
||||||
<Button type_=ButtonType::LINK>
|
<Button type_=ButtonType::LINK>
|
||||||
"LINK"
|
"LINK"
|
||||||
</Button>
|
</Button>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Button type_=ButtonType::PRIMARY>
|
||||||
indoc!(r#"
|
"PRIMARY"
|
||||||
<Button type_=ButtonType::PRIMARY>
|
</Button>
|
||||||
"PRIMARY"
|
<Button type_=ButtonType::SOLID>
|
||||||
</Button>
|
"SOLID"
|
||||||
<Button type_=ButtonType::SOLID>
|
</Button>
|
||||||
"SOLID"
|
<Button type_=ButtonType::TEXT>
|
||||||
</Button>
|
"TEXT"
|
||||||
<Button type_=ButtonType::TEXT>
|
</Button>
|
||||||
"TEXT"
|
<Button type_=ButtonType::LINK>
|
||||||
</Button>
|
"LINK"
|
||||||
<Button type_=ButtonType::LINK>
|
</Button>
|
||||||
"LINK"
|
"#, "rust")>
|
||||||
</Button>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
<h3>"color"</h3>
|
<h3>"color"</h3>
|
||||||
|
@ -54,23 +52,21 @@ pub fn ButtonPage() -> impl IntoView {
|
||||||
<Button color=ButtonColor::ERROR>
|
<Button color=ButtonColor::ERROR>
|
||||||
"ERROR Color"
|
"ERROR Color"
|
||||||
</Button>
|
</Button>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Button color=ButtonColor::PRIMARY>
|
||||||
indoc!(r#"
|
"PRIMARY Color"
|
||||||
<Button color=ButtonColor::PRIMARY>
|
</Button>
|
||||||
"PRIMARY Color"
|
<Button color=ButtonColor::SUCCESS>
|
||||||
</Button>
|
"SUCCESS Color"
|
||||||
<Button color=ButtonColor::SUCCESS>
|
</Button>
|
||||||
"SUCCESS Color"
|
<Button color=ButtonColor::WARNING>
|
||||||
</Button>
|
"WARNING Color"
|
||||||
<Button color=ButtonColor::WARNING>
|
</Button>
|
||||||
"WARNING Color"
|
<Button color=ButtonColor::ERROR>
|
||||||
</Button>
|
"ERROR Color"
|
||||||
<Button color=ButtonColor::ERROR>
|
</Button>
|
||||||
"ERROR Color"
|
"#, "rust")>
|
||||||
</Button>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
<h3>"icon"</h3>
|
<h3>"icon"</h3>
|
||||||
|
@ -80,29 +76,25 @@ pub fn ButtonPage() -> impl IntoView {
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
||||||
</Button>
|
</Button>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
indoc! {r#"
|
"ERROR Color Icon"
|
||||||
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
|
</Button>
|
||||||
"ERROR Color Icon"
|
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
||||||
</Button>
|
</Button>
|
||||||
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
|
"#, "rust")>
|
||||||
</Button>
|
""
|
||||||
"#}
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
<h3>"style"</h3>
|
<h3>"style"</h3>
|
||||||
<Demo>
|
<Demo>
|
||||||
<Button style="background: blue;">"style blue"</Button>
|
<Button style="background: blue;">"style blue"</Button>
|
||||||
<Button style="width: 40px; height: 20px">"size"</Button>
|
<Button style="width: 40px; height: 20px">"size"</Button>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Button style="background: blue;">"style blue"</Button>
|
||||||
indoc! {r#"
|
<Button style="width: 40px; height: 20px">"size"</Button>
|
||||||
<Button style="background: blue;">"style blue"</Button>
|
"#, "rust")>
|
||||||
<Button style="width: 40px; height: 20px">"size"</Button>
|
""
|
||||||
"#}
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
use std::collections::HashSet;
|
use std::collections::HashSet;
|
||||||
|
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn CheckboxPage() -> impl IntoView {
|
pub fn CheckboxPage() -> impl IntoView {
|
||||||
|
@ -16,16 +16,14 @@ pub fn CheckboxPage() -> impl IntoView {
|
||||||
<Checkbox checked>
|
<Checkbox checked>
|
||||||
"Click"
|
"Click"
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let checked = create_rw_signal(false);
|
||||||
indoc! {r#"
|
|
||||||
let checked = create_rw_signal(false);
|
|
||||||
|
|
||||||
<Checkbox checked>
|
<Checkbox checked>
|
||||||
"Click"
|
"Click"
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
"#}
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
<h3>"group"</h3>
|
<h3>"group"</h3>
|
||||||
|
@ -38,18 +36,16 @@ pub fn CheckboxPage() -> impl IntoView {
|
||||||
<div style="margin-top: 1rem">
|
<div style="margin-top: 1rem">
|
||||||
"value: " { move || format!("{:?}", value.get()) }
|
"value: " { move || format!("{:?}", value.get()) }
|
||||||
</div>
|
</div>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let value = create_rw_signal(HashSet::new());
|
||||||
indoc! {r#"
|
|
||||||
let value = create_rw_signal(HashSet::new());
|
|
||||||
|
|
||||||
<CheckboxGroup value>
|
<CheckboxGroup value>
|
||||||
<CheckboxItem label="apple" value="a" />
|
<CheckboxItem label="apple" value="a" />
|
||||||
<CheckboxItem label="b" value="b" />
|
<CheckboxItem label="b" value="b" />
|
||||||
<CheckboxItem label="c" value="c" />
|
<CheckboxItem label="c" value="c" />
|
||||||
</CheckboxGroup>
|
</CheckboxGroup>
|
||||||
"#}
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ImagePage() -> impl IntoView {
|
pub fn ImagePage() -> impl IntoView {
|
||||||
|
@ -9,15 +9,13 @@ pub fn ImagePage() -> impl IntoView {
|
||||||
<div style="width: 896px; margin: 0 auto;">
|
<div style="width: 896px; margin: 0 auto;">
|
||||||
<h1>"Image"</h1>
|
<h1>"Image"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
||||||
<Image width="200px" height="200px"/>
|
<Image width="200px" height="200px"/>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
||||||
indoc! {r#"
|
<Image width="200px" height="200px"/>
|
||||||
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
"#, "rust")>
|
||||||
<Image width="200px" height="200px"/>
|
""
|
||||||
"#}
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn InputPage() -> impl IntoView {
|
pub fn InputPage() -> impl IntoView {
|
||||||
|
@ -12,15 +12,14 @@ pub fn InputPage() -> impl IntoView {
|
||||||
<Demo>
|
<Demo>
|
||||||
<Input value/>
|
<Input value/>
|
||||||
<Input value type_=InputType::PASSWORD />
|
<Input value type_=InputType::PASSWORD />
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let value = create_rw_signal(String::from("o"));
|
||||||
indoc! {r#"
|
|
||||||
let value = create_rw_signal(String::from("o"));
|
|
||||||
|
|
||||||
<Input value/>
|
<Input value/>
|
||||||
<Input value type_=InputType::PASSWORD />
|
<Input value type_=InputType::PASSWORD />
|
||||||
"#}
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn MenuPage() -> impl IntoView {
|
pub fn MenuPage() -> impl IntoView {
|
||||||
|
@ -14,17 +14,15 @@ pub fn MenuPage() -> impl IntoView {
|
||||||
<MenuItem key="a" label="and"/>
|
<MenuItem key="a" label="and"/>
|
||||||
<MenuItem key="o" label="or"/>
|
<MenuItem key="o" label="or"/>
|
||||||
</Menu>
|
</Menu>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let selected = create_rw_signal(String::from("o"));
|
||||||
indoc!(r#"
|
|
||||||
let selected = create_rw_signal(String::from("o"));
|
<Menu selected>
|
||||||
|
<MenuItem key="a" label="and"/>
|
||||||
<Menu selected>
|
<MenuItem key="o" label="or"/>
|
||||||
<MenuItem key="a" label="and"/>
|
</Menu>
|
||||||
<MenuItem key="o" label="or"/>
|
"#, "rust")>
|
||||||
</Menu>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ModalPage() -> impl IntoView {
|
pub fn ModalPage() -> impl IntoView {
|
||||||
|
@ -16,19 +16,17 @@ pub fn ModalPage() -> impl IntoView {
|
||||||
<Modal title="title" show>
|
<Modal title="title" show>
|
||||||
"hello"
|
"hello"
|
||||||
</Modal>
|
</Modal>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let show = create_rw_signal(false);
|
||||||
indoc! {r#"
|
|
||||||
let show = create_rw_signal(false);
|
|
||||||
|
|
||||||
<Button on:click=move |_| show.set(true)>
|
<Button on:click=move |_| show.set(true)>
|
||||||
"open modal"
|
"open modal"
|
||||||
</Button>
|
</Button>
|
||||||
<Modal title="title" show>
|
<Modal title="title" show>
|
||||||
"hello"
|
"hello"
|
||||||
</Modal>
|
</Modal>
|
||||||
"#}
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,9 +2,9 @@ use crate::{
|
||||||
components::{Demo, DemoCode},
|
components::{Demo, DemoCode},
|
||||||
pages::MobilePage,
|
pages::MobilePage,
|
||||||
};
|
};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::mobile::NavBar;
|
use melt_ui::mobile::NavBar;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn NavBarPage() -> impl IntoView {
|
pub fn NavBarPage() -> impl IntoView {
|
||||||
|
@ -14,19 +14,17 @@ pub fn NavBarPage() -> impl IntoView {
|
||||||
<h1>"Navbar"</h1>
|
<h1>"Navbar"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
""
|
""
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<NavBar
|
||||||
indoc!(r#"
|
title="Home"
|
||||||
<NavBar
|
left_arrow=true
|
||||||
title="Home"
|
left_text="back"
|
||||||
left_arrow=true
|
right_text="add"
|
||||||
left_text="back"
|
click_left=click_left
|
||||||
right_text="add"
|
click_right=click_right
|
||||||
click_left=click_left
|
/>
|
||||||
click_right=click_right
|
"#, "rust")>
|
||||||
/>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn SelectPage() -> impl IntoView {
|
pub fn SelectPage() -> impl IntoView {
|
||||||
|
@ -16,18 +16,16 @@ pub fn SelectPage() -> impl IntoView {
|
||||||
<h1>"Select"</h1>
|
<h1>"Select"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
<Select value=selected_value options/>
|
<Select value=selected_value options/>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let selected_value = create_rw_signal(Some(String::from("apple")));
|
||||||
indoc! {r#"
|
let options = vec![SelectOption {
|
||||||
let selected_value = create_rw_signal(Some(String::from("apple")));
|
label: String::from("apple"),
|
||||||
let options = vec![SelectOption {
|
value: String::from("apple"),
|
||||||
label: String::from("apple"),
|
}];
|
||||||
value: String::from("apple"),
|
|
||||||
}];
|
|
||||||
|
|
||||||
<Select value=selected_value options/>
|
<Select value=selected_value options/>
|
||||||
"#}
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn SliderPage() -> impl IntoView {
|
pub fn SliderPage() -> impl IntoView {
|
||||||
|
@ -12,14 +12,12 @@ pub fn SliderPage() -> impl IntoView {
|
||||||
<h1>"Slider"</h1>
|
<h1>"Slider"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
<Slider value/>
|
<Slider value/>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let value = create_rw_signal(0.0);
|
||||||
indoc!(r#"
|
|
||||||
let value = create_rw_signal(0.0);
|
|
||||||
|
|
||||||
<Slider value/>
|
<Slider value/>
|
||||||
"#)
|
"#, "rust")>
|
||||||
}
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn SpacePage() -> impl IntoView {
|
pub fn SpacePage() -> impl IntoView {
|
||||||
|
@ -14,16 +14,14 @@ pub fn SpacePage() -> impl IntoView {
|
||||||
<Button>"2"</Button>
|
<Button>"2"</Button>
|
||||||
<Button>"3"</Button>
|
<Button>"3"</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Space>
|
||||||
indoc!(r#"
|
<Button>"1"</Button>
|
||||||
<Space>
|
<Button>"2"</Button>
|
||||||
<Button>"1"</Button>
|
<Button>"3"</Button>
|
||||||
<Button>"2"</Button>
|
</Space>
|
||||||
<Button>"3"</Button>
|
"#, "rust")>
|
||||||
</Space>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
<h3>"gap"</h3>
|
<h3>"gap"</h3>
|
||||||
|
@ -38,21 +36,19 @@ pub fn SpacePage() -> impl IntoView {
|
||||||
<Button>"2"</Button>
|
<Button>"2"</Button>
|
||||||
<Button>"3"</Button>
|
<Button>"3"</Button>
|
||||||
</Space>
|
</Space>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
<Space gap=SpaceGap::LARGE>
|
||||||
indoc!(r#"
|
<Button>"1"</Button>
|
||||||
<Space gap=SpaceGap::LARGE>
|
<Button>"2"</Button>
|
||||||
<Button>"1"</Button>
|
<Button>"3"</Button>
|
||||||
<Button>"2"</Button>
|
</Space>
|
||||||
<Button>"3"</Button>
|
<Space gap=SpaceGap::TUPLE(36, 36)>
|
||||||
</Space>
|
<Button>"1"</Button>
|
||||||
<Space gap=SpaceGap::TUPLE(36, 36)>
|
<Button>"2"</Button>
|
||||||
<Button>"1"</Button>
|
<Button>"3"</Button>
|
||||||
<Button>"2"</Button>
|
</Space>
|
||||||
<Button>"3"</Button>
|
"#, "rust")>
|
||||||
</Space>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,9 +2,9 @@ use crate::{
|
||||||
components::{Demo, DemoCode},
|
components::{Demo, DemoCode},
|
||||||
pages::MobilePage,
|
pages::MobilePage,
|
||||||
};
|
};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::mobile::*;
|
use melt_ui::mobile::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn TabbarPage() -> impl IntoView {
|
pub fn TabbarPage() -> impl IntoView {
|
||||||
|
@ -14,24 +14,22 @@ pub fn TabbarPage() -> impl IntoView {
|
||||||
<h1>"Tabbar"</h1>
|
<h1>"Tabbar"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
""
|
""
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let selected = create_rw_signal(String::from("o"));
|
||||||
indoc!(r#"
|
|
||||||
let selected = create_rw_signal(String::from("o"));
|
<Tabbar selected>
|
||||||
|
<TabbarItem name="a">
|
||||||
<Tabbar selected>
|
"and"
|
||||||
<TabbarItem name="a">
|
</TabbarItem>
|
||||||
"and"
|
<TabbarItem name="i">
|
||||||
</TabbarItem>
|
"if"
|
||||||
<TabbarItem name="i">
|
</TabbarItem>
|
||||||
"if"
|
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
|
||||||
</TabbarItem>
|
"or"
|
||||||
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
|
</TabbarItem>
|
||||||
"or"
|
</Tabbar>
|
||||||
</TabbarItem>
|
"#, "rust")>
|
||||||
</Tabbar>
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn TabsPage() -> impl IntoView {
|
pub fn TabsPage() -> impl IntoView {
|
||||||
|
@ -18,20 +18,18 @@ pub fn TabsPage() -> impl IntoView {
|
||||||
"pear"
|
"pear"
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let active_key = create_rw_signal("apple");
|
||||||
indoc! {r#"
|
<Tabs active_key>
|
||||||
let active_key = create_rw_signal("apple");
|
<Tab key="apple" label="Apple">
|
||||||
<Tabs active_key>
|
"apple"
|
||||||
<Tab key="apple" label="Apple">
|
</Tab>
|
||||||
"apple"
|
<Tab key="pear" label="Pear">
|
||||||
</Tab>
|
"pear"
|
||||||
<Tab key="pear" label="Pear">
|
</Tab>
|
||||||
"pear"
|
</Tabs>
|
||||||
</Tab>
|
"#, "rust")>
|
||||||
</Tabs>
|
""
|
||||||
"#}
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,10 +2,10 @@ use crate::{
|
||||||
components::{Demo, DemoCode},
|
components::{Demo, DemoCode},
|
||||||
pages::MobilePage,
|
pages::MobilePage,
|
||||||
};
|
};
|
||||||
use indoc::indoc;
|
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use melt_ui::mobile::*;
|
use melt_ui::mobile::*;
|
||||||
use melt_ui::*;
|
use melt_ui::*;
|
||||||
|
use prisms::highlight_str;
|
||||||
use std::time::Duration;
|
use std::time::Duration;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
|
@ -16,19 +16,17 @@ pub fn ToastPage() -> impl IntoView {
|
||||||
<h1>"Toast"</h1>
|
<h1>"Toast"</h1>
|
||||||
<Demo>
|
<Demo>
|
||||||
""
|
""
|
||||||
<DemoCode slot>
|
<DemoCode slot html=highlight_str!(r#"
|
||||||
{
|
let count = create_rw_signal(0u32);
|
||||||
indoc!(r#"
|
let onclick = move |_| {
|
||||||
let count = create_rw_signal(0u32);
|
show_toast(ToastOptions {
|
||||||
let onclick = move |_| {
|
message: format!("Hello {}", count.get_untracked()),
|
||||||
show_toast(ToastOptions {
|
duration: Duration::from_millis(2000),
|
||||||
message: format!("Hello {}", count.get_untracked()),
|
});
|
||||||
duration: Duration::from_millis(2000),
|
count.set(count.get_untracked() + 1);
|
||||||
});
|
};
|
||||||
count.set(count.get_untracked() + 1);
|
"#, "rust")>
|
||||||
};
|
""
|
||||||
"#)
|
|
||||||
}
|
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,4 +38,5 @@ pub use space::*;
|
||||||
pub use table::*;
|
pub use table::*;
|
||||||
pub use tabs::*;
|
pub use tabs::*;
|
||||||
pub use theme::Theme;
|
pub use theme::Theme;
|
||||||
|
pub use utils::mount_style::mount_style;
|
||||||
pub use wave::*;
|
pub use wave::*;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
pub(crate) mod mount_style;
|
pub mod mount_style;
|
||||||
|
|
Loading…
Add table
Reference in a new issue