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

feat(gh-pages): add demo component

Browse source
This commit is contained in:
luoxiao 2023-09-17 22:19:54 +08:00
parent 55dc1c7b38
commit f9e9c84623
7 changed files with 137 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,3 +1,7 @@
## melt-ui ## melt-ui
A Leptos UI Library A Leptos UI Library
## Resources
[Pigment](https://github.com/kobaltedev/pigment)

1
gh-pages/index.html
View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Melt UI</title> <title>Melt UI</title>
<link data-trunk rel="css" href="./src/assets/css/index.css" /> <link data-trunk rel="css" href="./src/assets/css/index.css" />
<link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg">
</head> </head>
<body> <body>

4
gh-pages/src/assets/svg/grid_dot.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="white"/>
<rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 216 B

23
gh-pages/src/components/demo.rs Normal file
View file

@ -0,0 +1,23 @@
use leptos::*;
use melt_ui::Code;
#[slot]
pub struct DemoCode {
children: Children,
}
#[component]
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
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;">
{ children() }
</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;">
<Code>
<pre style="margin: 0">
{ (demo_code.children)() }
</pre>
</Code>
</div>
}
}

2
gh-pages/src/components/mod.rs
View file

@ -1,3 +1,5 @@
mod demo;
mod site_header; mod site_header;
pub use demo::{Demo, DemoCode};
pub use site_header::*; pub use site_header::*;

73
gh-pages/src/pages/button/mod.rs
View file

@ -1,10 +1,14 @@
use crate::components::{Demo, DemoCode};
use indoc::indoc;
use leptos::*; use leptos::*;
use melt_ui::*; use melt_ui::*;
#[component] #[component]
pub fn ButtonPage() -> impl IntoView { pub fn ButtonPage() -> impl IntoView {
view! { view! {
<Space> <div style="width: 896px; margin: 0 auto;">
<h1>"Button"</h1>
<Demo>
<Button type_=ButtonType::PRIMARY> <Button type_=ButtonType::PRIMARY>
"PRIMARY" "PRIMARY"
</Button> </Button>
@ -17,6 +21,27 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK> <Button type_=ButtonType::LINK>
"LINK" "LINK"
</Button> </Button>
<DemoCode slot>
{
indoc!(r#"
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
"#)
}
</DemoCode>
</Demo>
<h3>"color"</h3>
<Demo>
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>
"PRIMARY Color" "PRIMARY Color"
</Button> </Button>
@ -29,15 +54,57 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR> <Button color=ButtonColor::ERROR>
"ERROR Color" "ERROR Color"
</Button> </Button>
<DemoCode slot>
{
indoc!(r#"
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
"#)
}
</DemoCode>
</Demo>
<h3>"icon"</h3>
<Demo>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon" "ERROR Color Icon"
</Button> </Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button> </Button>
</Space> <DemoCode slot>
<div style="padding-top: 12px"> {
indoc! {r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
"#}
}
</DemoCode>
</Demo>
<h3>"style"</h3>
<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>
{
indoc! {r#"
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
"#}
}
</DemoCode>
</Demo>
</div> </div>
} }
} }

2
gh-pages/src/pages/components.rs
View file

@ -50,7 +50,7 @@ pub fn ComponentsPage() -> impl IntoView {
<MenuItem key="select" label="select" /> <MenuItem key="select" label="select" />
</Menu> </Menu>
</LayoutSider> </LayoutSider>
<Layout style="padding: 8px 12px 28px"> <Layout style="padding: 8px 12px 28px; overflow-y: scroll;">
<Outlet /> <Outlet />
</Layout> </Layout>
</Layout> </Layout>