mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
Feat/ssr (#25)
* feat: add ssr_axum template * feat: demo added the ssr mode * fix: demo ssr mode * feat(ssr): mount_style * pref: delete some useless fikes * fix(ssr): problems caused by using wasm_bindgen * feat: add hydrate * pref: Demo component * fix(hydrate): teleport component * fix(hydrate): hydrate feature * fix(hydrate): tabs component * feat: GlobalStyle component margin style * docs(ssr): static assets
This commit is contained in:
luoxiaozero
GitHub
parent
c15e7cf204
commit
21506b2164
72 changed files with 1763 additions and 1258 deletions
12
Cargo.toml
12
Cargo.toml
|
|
@ -13,13 +13,15 @@ license = "MIT"
|
|||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.5.2", features = ["csr"] }
|
||||
leptos = { version = "0.5.2" }
|
||||
leptos_meta = { version = "0.5.2", optional = true }
|
||||
web-sys = { version = "0.3.63", features = [
|
||||
"DomRect",
|
||||
"File",
|
||||
"FileList",
|
||||
"DataTransfer",
|
||||
] }
|
||||
wasm-bindgen = "0.2.88"
|
||||
icondata = { version = "0.1.0", features = [
|
||||
"AiCloseOutlined",
|
||||
"AiCheckOutlined",
|
||||
|
|
@ -36,5 +38,11 @@ icondata_core = "0.0.2"
|
|||
uuid = { version = "1.5.0", features = ["v4"] }
|
||||
cfg-if = "1.0.0"
|
||||
|
||||
[features]
|
||||
default = ["csr"]
|
||||
csr = ["leptos/csr"]
|
||||
ssr = ["leptos/ssr", "leptos_meta/ssr"]
|
||||
hydrate = ["leptos/hydrate"]
|
||||
|
||||
[workspace]
|
||||
members = ["demo"]
|
||||
members = ["demo", "examples/*"]
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ edition = "2021"
|
|||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.5.2", features = ["csr"] }
|
||||
leptos_meta = { version = "0.5.2", features = ["csr"] }
|
||||
leptos_router = { version = "0.5.2", features = ["csr"] }
|
||||
leptos = { version = "0.5.2" }
|
||||
leptos_meta = { version = "0.5.2" }
|
||||
leptos_router = { version = "0.5.2" }
|
||||
leptos_devtools = "0.0.1"
|
||||
thaw = { path = "../" }
|
||||
thaw = { path = "../", default-features = false }
|
||||
icondata = { version = "0.1.0", features = [
|
||||
"AiCloseOutlined",
|
||||
"AiCheckOutlined",
|
||||
|
|
@ -21,4 +21,13 @@ icondata = { version = "0.1.0", features = [
|
|||
prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
|
||||
|
||||
[features]
|
||||
default = ["csr"]
|
||||
tracing = ["leptos/tracing"]
|
||||
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr", "thaw/csr"]
|
||||
ssr = ["leptos/ssr", "leptos_meta/ssr", "leptos_router/ssr", "thaw/ssr"]
|
||||
hydrate = [
|
||||
"leptos/hydrate",
|
||||
"leptos_meta/hydrate",
|
||||
"leptos_router/hydrate",
|
||||
"thaw/hydrate",
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
href="/thaw/favicon.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<link data-trunk rel="css" href="./src/assets/css/index.css" />
|
||||
<link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
|
||||
<link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
|
||||
<link data-trunk rel="copy-file" href="./src/assets/404.html" />
|
||||
|
|
|
|||
|
|
@ -87,9 +87,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
|
|||
#[component]
|
||||
fn TheProvider(children: Children) -> impl IntoView {
|
||||
fn use_query_value(key: &str) -> Option<String> {
|
||||
let href = window().location().href().ok()?;
|
||||
let url = Url::try_from(href.as_str()).ok()?;
|
||||
url.search_params.get(key).cloned()
|
||||
let query_map = use_query_map();
|
||||
query_map.with_untracked(|query| query.get(key).cloned())
|
||||
}
|
||||
let theme = use_query_value("theme").map_or_else(Theme::light, |name| {
|
||||
if name == "light" {
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.components-page-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.components-page-box aside {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.components-page-box main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.token.operator {
|
||||
background: hsla(0, 0%, 100%, 0) !important;
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@ use thaw::*;
|
|||
|
||||
#[slot]
|
||||
pub struct DemoCode {
|
||||
#[prop(optional)]
|
||||
html: &'static str,
|
||||
children: Children,
|
||||
}
|
||||
|
||||
|
|
@ -39,18 +37,27 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
|
|||
});
|
||||
style
|
||||
});
|
||||
|
||||
let frag = (demo_code.children)();
|
||||
let mut html = String::new();
|
||||
for node in frag.nodes {
|
||||
match node {
|
||||
View::Text(text) => html.push_str(&text.content),
|
||||
_ => leptos::logging::warn!("Only text nodes are supported as children of <DemoCode />."),
|
||||
}
|
||||
}
|
||||
|
||||
view! {
|
||||
<Style>
|
||||
{prisms::prism_css!()}
|
||||
<Style id="leptos-thaw-prism-css">{prisms::prism_css!()}</Style>
|
||||
<Style id="leptos-thaw-prism-css-fix">
|
||||
".token.operator {
|
||||
background: hsla(0, 0%, 100%, 0) !important;
|
||||
}"
|
||||
</Style>
|
||||
<div style=move || style.get()>
|
||||
{children()}
|
||||
</div>
|
||||
<div style=move || style.get()>{children()}</div>
|
||||
<div style=move || code_style.get()>
|
||||
<Code>
|
||||
<pre style="margin: 0" inner_html=demo_code.html>
|
||||
{(demo_code.children)()}
|
||||
</pre>
|
||||
<pre style="margin: 0" inner_html=html></pre>
|
||||
</Code>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,26 +91,25 @@ pub fn SiteHeader() -> impl IntoView {
|
|||
/>
|
||||
<Button
|
||||
variant=ButtonVariant::Text
|
||||
on:click=move |_| {
|
||||
on_click=move |_| {
|
||||
let navigate = use_navigate();
|
||||
navigate("/guide/installation", Default::default());
|
||||
}
|
||||
>
|
||||
|
||||
"Guide"
|
||||
</Button>
|
||||
<Button
|
||||
variant=ButtonVariant::Text
|
||||
on:click=move |_| {
|
||||
on_click=move |_| {
|
||||
let navigate = use_navigate();
|
||||
navigate("/components/button", Default::default());
|
||||
}
|
||||
>
|
||||
|
||||
"Components"
|
||||
</Button>
|
||||
<Button
|
||||
variant=ButtonVariant::Text
|
||||
on:click=on_theme
|
||||
>
|
||||
<Button variant=ButtonVariant::Text on_click=on_theme>
|
||||
{move || theme_name.get()}
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -121,8 +120,8 @@ pub fn SiteHeader() -> impl IntoView {
|
|||
on:click=move |_| {
|
||||
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
|
||||
}
|
||||
>
|
||||
</Button>
|
||||
/>
|
||||
|
||||
</Space>
|
||||
|
||||
</LayoutHeader>
|
||||
|
|
|
|||
5
demo/src/lib.rs
Normal file
5
demo/src/lib.rs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
mod app;
|
||||
mod components;
|
||||
mod pages;
|
||||
|
||||
pub use app::App;
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
mod app;
|
||||
mod components;
|
||||
mod pages;
|
||||
|
||||
use app::*;
|
||||
use demo::App;
|
||||
use leptos::*;
|
||||
|
||||
fn main() {
|
||||
|
|
|
|||
|
|
@ -20,19 +20,17 @@ pub fn AlertPage() -> impl IntoView {
|
|||
"error"
|
||||
</Alert>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Alert variant=AlertVariant::Success title="title">"success"</Alert>
|
||||
<Alert variant=AlertVariant::Warning title="title">"warning"</Alert>
|
||||
<Alert variant=AlertVariant::Error title="title">"error"</Alert>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Alert Props"</h3>
|
||||
|
|
@ -49,7 +47,7 @@ pub fn AlertPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"title"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Title of the alert."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ pub fn AutoCompletePage() -> impl IntoView {
|
|||
<h1>"AutoComplete"</h1>
|
||||
<Demo>
|
||||
<AutoComplete value options placeholder="Email"/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(String::new());
|
||||
let options =create_memo(|_| {
|
||||
|
|
@ -48,10 +48,8 @@ pub fn AutoCompletePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"AutoComplete Props"</h3>
|
||||
|
|
@ -68,13 +66,13 @@ pub fn AutoCompletePage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"value"</td>
|
||||
<td>"RwSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Input of autocomplete."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"placeholder"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Autocomplete's placeholder."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn AvatarPage() -> impl IntoView {
|
|||
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" round=true/>
|
||||
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" size=50/>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<Avatar src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg"/>
|
||||
|
|
@ -25,10 +25,8 @@ pub fn AvatarPage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Avatar Props"</h3>
|
||||
|
|
@ -45,7 +43,7 @@ pub fn AvatarPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"src"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Avatar's image source."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ pub fn BadgePage() -> impl IntoView {
|
|||
"value:"
|
||||
{move || value.get()}
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(0);
|
||||
view! {
|
||||
|
|
@ -62,10 +62,8 @@ pub fn BadgePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Badge Props"</h3>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn BreadcrumbPage() -> impl IntoView {
|
|||
<BreadcrumbItem>"UI"</BreadcrumbItem>
|
||||
<BreadcrumbItem>"Thaw"</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>
|
||||
|
|
@ -31,10 +31,8 @@ pub fn BreadcrumbPage() -> impl IntoView {
|
|||
</Breadcrumb>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Separator"</h3>
|
||||
|
|
@ -44,9 +42,9 @@ pub fn BreadcrumbPage() -> impl IntoView {
|
|||
<BreadcrumbItem>"UI"</BreadcrumbItem>
|
||||
<BreadcrumbItem>"Thaw"</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Breadcrumb separator=">">
|
||||
<BreadcrumbItem>
|
||||
|
|
@ -61,10 +59,8 @@ pub fn BreadcrumbPage() -> impl IntoView {
|
|||
</Breadcrumb>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Breadcrumb Props"</h3>
|
||||
|
|
@ -81,7 +77,7 @@ pub fn BreadcrumbPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"separator"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""/""#</td>
|
||||
<td>"/"</td>
|
||||
<td>"Breadcrumb separator."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<Button variant=ButtonVariant::Text>"Text"</Button>
|
||||
<Button variant=ButtonVariant::Link>"Link"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Button variant=ButtonVariant::Primary>
|
||||
"Primary"
|
||||
|
|
@ -33,10 +33,8 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
</Button>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"color"</h3>
|
||||
|
|
@ -47,9 +45,9 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<Button color=ButtonColor::Warning>"Warning Color"</Button>
|
||||
<Button color=ButtonColor::Error>"Error Color"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Button color=ButtonColor::Primary>
|
||||
"Primary Color"
|
||||
|
|
@ -65,10 +63,8 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
</Button>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"icon"</h3>
|
||||
|
|
@ -83,9 +79,9 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
round=true
|
||||
/>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
|
||||
"Error Color Icon"
|
||||
|
|
@ -94,10 +90,8 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
</Button>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<LoadingButton/>
|
||||
|
|
@ -107,18 +101,16 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<Button style="background: blue;">"style blue"</Button>
|
||||
<Button style="width: 40px; height: 20px">"size"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Button style="background: blue;">"style blue"</Button>
|
||||
<Button style="width: 40px; height: 20px">"size"</Button>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Button Props"</h3>
|
||||
|
|
@ -135,7 +127,7 @@ pub fn ButtonPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"style"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Button's style."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -215,9 +207,9 @@ fn LoadingButton() -> impl IntoView {
|
|||
"Click Me"
|
||||
</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let loading = create_rw_signal(false);
|
||||
let on_click = move |_| {
|
||||
|
|
@ -241,10 +233,8 @@ fn LoadingButton() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,34 +10,24 @@ pub fn CardPage() -> impl IntoView {
|
|||
<h1>"Card"</h1>
|
||||
<Demo>
|
||||
<Space vertical=true>
|
||||
<Card title="title">"content"</Card>
|
||||
<Card title="title">
|
||||
<CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
|
||||
"content"
|
||||
</Card>
|
||||
<Card title="title">
|
||||
<CardHeaderExtra slot>
|
||||
"header-extra"
|
||||
</CardHeaderExtra>
|
||||
<CardHeader slot>"header"</CardHeader>
|
||||
"content"
|
||||
</Card>
|
||||
<Card title="title">
|
||||
<CardHeader slot>
|
||||
"header"
|
||||
</CardHeader>
|
||||
<CardHeaderExtra slot>"header-extra"</CardHeaderExtra>
|
||||
"content"
|
||||
</Card>
|
||||
<Card title="title">
|
||||
<CardHeaderExtra slot>
|
||||
"header-extra"
|
||||
</CardHeaderExtra>
|
||||
"content"
|
||||
<CardFooter slot>
|
||||
"footer"
|
||||
</CardFooter>
|
||||
<CardFooter slot>"footer"</CardFooter>
|
||||
</Card>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space vertical=true>
|
||||
<Card title="title">
|
||||
|
|
@ -67,10 +57,8 @@ pub fn CardPage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Card Props"</h3>
|
||||
|
|
@ -87,7 +75,7 @@ pub fn CardPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"title"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Card title."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn CheckboxPage() -> impl IntoView {
|
|||
<h1>"Checkbox"</h1>
|
||||
<Demo>
|
||||
<Checkbox value=checked>"Click"</Checkbox>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(false);
|
||||
|
||||
|
|
@ -27,10 +27,8 @@ pub fn CheckboxPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"group"</h3>
|
||||
|
|
@ -41,9 +39,9 @@ pub fn CheckboxPage() -> impl IntoView {
|
|||
<CheckboxItem label="c" key="c"/>
|
||||
</CheckboxGroup>
|
||||
<div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(HashSet::new());
|
||||
|
||||
|
|
@ -56,10 +54,8 @@ pub fn CheckboxPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Checkbox Props"</h3>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ pub fn ColorPickerPage() -> impl IntoView {
|
|||
<h1>"Color Picker"</h1>
|
||||
<Demo>
|
||||
<ColorPicker value/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = RGBA::default();
|
||||
|
||||
|
|
@ -23,10 +23,8 @@ pub fn ColorPickerPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"ColorPicker Props"</h3>
|
||||
|
|
|
|||
|
|
@ -54,8 +54,7 @@ impl IntoView for MenuGroupOption {
|
|||
let Self { label, children } = self;
|
||||
view! {
|
||||
<MenuGroup label=format!(
|
||||
"{label} ({})",
|
||||
children.len(),
|
||||
"{label} ({})", children.len()
|
||||
)>
|
||||
|
||||
{children.into_iter().map(|v| v.into_view()).collect_view()}
|
||||
|
|
|
|||
|
|
@ -9,22 +9,18 @@ pub fn DividerPage() -> impl IntoView {
|
|||
<div style="width: 896px; margin: 0 auto;">
|
||||
<h1>"Divider"</h1>
|
||||
<Demo>
|
||||
"top"
|
||||
<Divider />
|
||||
"bottom"
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
"top" <Divider/> "bottom"
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
"top"
|
||||
<Divider />
|
||||
"bottom"
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ use thaw::*;
|
|||
pub fn GridPage() -> impl IntoView {
|
||||
view! {
|
||||
<Style>
|
||||
r#".thaw-grid-item {
|
||||
".thaw-grid-item {
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
|
|
@ -18,7 +18,7 @@ pub fn GridPage() -> impl IntoView {
|
|||
}
|
||||
.thaw-grid-item:nth-child(even) {
|
||||
background-color: #0078ffaa;
|
||||
}"#
|
||||
}"
|
||||
</Style>
|
||||
<div style="width: 896px; margin: 0 auto;">
|
||||
<h1>"Grid"</h1>
|
||||
|
|
@ -36,9 +36,9 @@ pub fn GridPage() -> impl IntoView {
|
|||
<GridItem>"789"</GridItem>
|
||||
</Grid>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Grid>
|
||||
<GridItem>"123"</GridItem>
|
||||
|
|
@ -53,10 +53,8 @@ pub fn GridPage() -> impl IntoView {
|
|||
</Grid>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"gap"</h3>
|
||||
|
|
@ -73,9 +71,9 @@ pub fn GridPage() -> impl IntoView {
|
|||
<GridItem>"567"</GridItem>
|
||||
<GridItem>"567"</GridItem>
|
||||
</Grid>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Grid cols=3 x_gap=8 y_gap=8>
|
||||
<GridItem>"123"</GridItem>
|
||||
|
|
@ -91,10 +89,8 @@ pub fn GridPage() -> impl IntoView {
|
|||
</Grid>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"gap"</h3>
|
||||
|
|
@ -103,9 +99,9 @@ pub fn GridPage() -> impl IntoView {
|
|||
<GridItem offset=2>"123"</GridItem>
|
||||
<GridItem>"456"</GridItem>
|
||||
</Grid>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Grid cols=4>
|
||||
<GridItem offset=2>"123"</GridItem>
|
||||
|
|
@ -113,10 +109,8 @@ pub fn GridPage() -> impl IntoView {
|
|||
</Grid>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Grid Props"</h3>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,9 @@ pub fn InstallationPage() -> impl IntoView {
|
|||
<p>"Installation thaw"</p>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html="cargo add thaw"
|
||||
>
|
||||
<DemoCode slot>
|
||||
|
||||
""
|
||||
"cargo add thaw"
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ pub fn GuidePage() -> impl IntoView {
|
|||
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
|
||||
<LayoutSider>
|
||||
<Menu value=selected>
|
||||
{
|
||||
gen_guide_menu_data().into_view()
|
||||
}
|
||||
|
||||
{gen_guide_menu_data().into_view()}
|
||||
|
||||
</Menu>
|
||||
</LayoutSider>
|
||||
<Layout style="padding: 8px 12px 28px; overflow-y: auto;">
|
||||
|
|
@ -58,9 +58,9 @@ impl IntoView for MenuGroupOption {
|
|||
let Self { label, children } = self;
|
||||
view! {
|
||||
<MenuGroup label=label>
|
||||
{
|
||||
children.into_iter().map(|v| v.into_view()).collect_view()
|
||||
}
|
||||
|
||||
{children.into_iter().map(|v| v.into_view()).collect_view()}
|
||||
|
||||
</MenuGroup>
|
||||
}
|
||||
}
|
||||
|
|
@ -74,9 +74,7 @@ pub(crate) struct MenuItemOption {
|
|||
impl IntoView for MenuItemOption {
|
||||
fn into_view(self) -> View {
|
||||
let Self { label, value } = self;
|
||||
view! {
|
||||
<MenuItem key=value label/>
|
||||
}
|
||||
view! { <MenuItem key=value label/> }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ pub fn UsagePage() -> impl IntoView {
|
|||
<p>"You just need to import thaw and use it."</p>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
// Import all
|
||||
use thaw::*;
|
||||
|
|
@ -20,18 +20,16 @@ pub fn UsagePage() -> impl IntoView {
|
|||
use thaw::{Button, ButtonVariant};
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<p>"A small example:"</p>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
use leptos::*;
|
||||
use thaw::*;
|
||||
|
|
@ -47,10 +45,8 @@ pub fn UsagePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ pub fn IconPage() -> impl IntoView {
|
|||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
|
||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCheckOutlined)/>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined) />
|
||||
|
|
@ -23,10 +23,8 @@ pub fn IconPage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Icon Props"</h3>
|
||||
|
|
@ -49,13 +47,13 @@ pub fn IconPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"width"</td>
|
||||
<td>"Option<MaybeSignal<String>>"</td>
|
||||
<td>r#""1em""#</td>
|
||||
<td>"1em"</td>
|
||||
<td>"The width of the icon."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"height"</td>
|
||||
<td>"Option<MaybeSignal<String>>"</td>
|
||||
<td>r#""1em""#</td>
|
||||
<td>"1em"</td>
|
||||
<td>"The height of the icon."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -11,18 +11,16 @@ pub fn ImagePage() -> impl IntoView {
|
|||
<Demo>
|
||||
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
||||
<Image width="200px" height="200px"/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
|
||||
<Image width="200px" height="200px"/>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Image Props"</h3>
|
||||
|
|
@ -39,37 +37,37 @@ pub fn ImagePage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"src"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Image source."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"alt"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Image alt information."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"width"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Image width."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"height"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Image height."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"border_radius"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Image border radius."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"object_fit"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Object-fit type of the image in the container."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn InputPage() -> impl IntoView {
|
|||
<Input value/>
|
||||
<Input value variant=InputVariant::Password placeholder="Password"/>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(String::from("o"));
|
||||
|
||||
|
|
@ -28,11 +28,8 @@ pub fn InputPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h1>"Prefix & Suffix"</h1>
|
||||
|
|
@ -44,9 +41,7 @@ pub fn InputPage() -> impl IntoView {
|
|||
</InputPrefix>
|
||||
</Input>
|
||||
<Input value>
|
||||
<InputSuffix slot>
|
||||
"$"
|
||||
</InputSuffix>
|
||||
<InputSuffix slot>"$"</InputSuffix>
|
||||
</Input>
|
||||
<Input value>
|
||||
<InputSuffix slot>
|
||||
|
|
@ -54,9 +49,9 @@ pub fn InputPage() -> impl IntoView {
|
|||
</InputSuffix>
|
||||
</Input>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(String::from("o"));
|
||||
|
||||
|
|
@ -81,11 +76,8 @@ pub fn InputPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Input Props"</h3>
|
||||
|
|
@ -102,7 +94,7 @@ pub fn InputPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"value"</td>
|
||||
<td>"RwSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Set the input value"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -114,14 +106,16 @@ pub fn InputPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"placeholder"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Placeholder of input."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"allow_value"</td>
|
||||
<td>"Option<Callback<String, bool>>"</td>
|
||||
<td>"None"</td>
|
||||
<td>"Check the incoming value, if it returns false, input will not be accepted."</td>
|
||||
<td>
|
||||
"Check the incoming value, if it returns false, input will not be accepted."
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"on_focus"</td>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ pub fn InputNumberPage() -> impl IntoView {
|
|||
<InputNumber value step=1/>
|
||||
<InputNumber value=value_f64 step=1.0/>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(0);
|
||||
let value_f64 = create_rw_signal(0.0);
|
||||
|
|
@ -29,11 +29,8 @@ pub fn InputNumberPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"InputNumber Props"</h3>
|
||||
|
|
@ -56,14 +53,16 @@ pub fn InputNumberPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"placeholder"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Placeholder of input number."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"step"</td>
|
||||
<td>"MaybeSignal<T>"</td>
|
||||
<td></td>
|
||||
<td>"The number which the current value is increased or decreased on key or button press."</td>
|
||||
<td>
|
||||
"The number which the current value is increased or decreased on key or button press."
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ pub fn LayoutPage() -> impl IntoView {
|
|||
<h1>"Layout"</h1>
|
||||
<Demo>
|
||||
<Layout>
|
||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
|
||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
||||
"Header"
|
||||
</LayoutHeader>
|
||||
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
||||
</Layout>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Layout>
|
||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
|
||||
|
|
@ -23,24 +25,28 @@ pub fn LayoutPage() -> impl IntoView {
|
|||
</Layout>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"sider"</h3>
|
||||
<Demo>
|
||||
<Layout has_sider=true>
|
||||
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
|
||||
<LayoutSider style="background-color: #0078ff99; padding: 20px;">
|
||||
"Sider"
|
||||
</LayoutSider>
|
||||
<Layout>
|
||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">"Header"</LayoutHeader>
|
||||
<Layout style="background-color: #0078ff88; padding: 20px;">"Content"</Layout>
|
||||
<LayoutHeader style="background-color: #0078ffaa; padding: 20px;">
|
||||
"Header"
|
||||
</LayoutHeader>
|
||||
<Layout style="background-color: #0078ff88; padding: 20px;">
|
||||
"Content"
|
||||
</Layout>
|
||||
</Layout>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
</Layout>
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Layout has_sider=true>
|
||||
<LayoutSider style="background-color: #0078ff99; padding: 20px;">"Sider"</LayoutSider>
|
||||
|
|
@ -51,10 +57,8 @@ pub fn LayoutPage() -> impl IntoView {
|
|||
</Layout>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Layout Props"</h3>
|
||||
|
|
@ -71,14 +75,16 @@ pub fn LayoutPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"style"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Layout's style."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"position"</td>
|
||||
<td>"LayoutPosition"</td>
|
||||
<td>"LayoutPosition::Static"</td>
|
||||
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
|
||||
<td>
|
||||
"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"has_sider"</td>
|
||||
|
|
@ -108,7 +114,7 @@ pub fn LayoutPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"style"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"LayoutHeader's style."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ pub fn LoadingBarPage() -> impl IntoView {
|
|||
<Button on_click=finish>"finish"</Button>
|
||||
<Button on_click=error>"error"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let loading_bar = use_loading_bar();
|
||||
let start = move |_| {
|
||||
|
|
@ -50,11 +50,8 @@ pub fn LoadingBarPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"LoadingBar Injection Methods"</h3>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn MenuPage() -> impl IntoView {
|
|||
<MenuItem key="a" label="and"/>
|
||||
<MenuItem key="o" label="or"/>
|
||||
</Menu>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(String::from("o"));
|
||||
|
||||
|
|
@ -26,10 +26,8 @@ pub fn MenuPage() -> impl IntoView {
|
|||
</Menu>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Menu Props"</h3>
|
||||
|
|
@ -46,7 +44,7 @@ pub fn MenuPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"value"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"The selected item key of the menu."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -96,13 +94,13 @@ pub fn MenuPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"label"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"The label of the menu item."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"key"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"The indentifier of the menu item."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ pub fn MessagePage() -> impl IntoView {
|
|||
<Button on:click=warning>"Warning"</Button>
|
||||
<Button on:click=error>"Error"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let message = use_message();
|
||||
let success = move |_| {
|
||||
|
|
@ -66,10 +66,8 @@ pub fn MessagePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"MessageProvider Injection Methods"</h3>
|
||||
|
|
@ -84,7 +82,9 @@ pub fn MessagePage() -> impl IntoView {
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>"create"</td>
|
||||
<td>"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"</td>
|
||||
<td>
|
||||
"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"
|
||||
</td>
|
||||
<td>"The label of the menu item."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,7 @@ pub fn MobilePage(path: &'static str) -> impl IntoView {
|
|||
});
|
||||
view! {
|
||||
<div style="width: 400px; text-align: center">
|
||||
<iframe
|
||||
src=move || src.get()
|
||||
style=move || style.get()
|
||||
></iframe>
|
||||
<iframe src=move || src.get() style=move || style.get()></iframe>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn ModalPage() -> impl IntoView {
|
|||
<Modal title="title" show>
|
||||
"hello"
|
||||
</Modal>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let show = create_rw_signal(false);
|
||||
|
||||
|
|
@ -28,10 +28,8 @@ pub fn ModalPage() -> impl IntoView {
|
|||
</Modal>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Modal Props"</h3>
|
||||
|
|
@ -54,7 +52,7 @@ pub fn ModalPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"title"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Modal title."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ pub fn NavBarPage() -> impl IntoView {
|
|||
<h1>"Navbar"</h1>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let click_text = create_rw_signal(String::from("none"));
|
||||
let on_click_left = move |_| click_text.set("left".to_string());
|
||||
|
|
@ -38,10 +38,8 @@ pub fn NavBarPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"NavBar Props"</h3>
|
||||
|
|
@ -58,7 +56,7 @@ pub fn NavBarPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"title"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"NavBar title."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -70,25 +68,25 @@ pub fn NavBarPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"left_text"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"NavBar left text."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"on_click_left"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"NavBar left click."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"right_text"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"NavBar right text."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"on_click_right"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"NavBar right click."</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -18,17 +18,13 @@ pub fn ProgressPage() -> impl IntoView {
|
|||
<Progress percentage color=ProgressColor::Warning/>
|
||||
<Progress percentage color=ProgressColor::Error/>
|
||||
<Space>
|
||||
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
|
||||
"-10%"
|
||||
</Button>
|
||||
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>
|
||||
"+10%"
|
||||
</Button>
|
||||
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>"-10%"</Button>
|
||||
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>"+10%"</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let percentage = create_rw_signal(0.0f32);
|
||||
|
||||
|
|
@ -52,10 +48,8 @@ pub fn ProgressPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Progress Props"</h3>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ pub fn RadioPage() -> impl IntoView {
|
|||
<h1>"Radio"</h1>
|
||||
<Demo>
|
||||
<Radio value=checked>"Click"</Radio>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(false);
|
||||
|
||||
|
|
@ -24,10 +24,8 @@ pub fn RadioPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Radio Props"</h3>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ pub fn SelectPage() -> impl IntoView {
|
|||
<h1>"Select"</h1>
|
||||
<Demo>
|
||||
<Select value=selected_value options/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let selected_value = create_rw_signal(Some(String::from("apple")));
|
||||
let options = vec![SelectOption {
|
||||
|
|
@ -29,10 +29,8 @@ pub fn SelectPage() -> impl IntoView {
|
|||
<Select value=selected_value options/>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Select Props"</h3>
|
||||
|
|
|
|||
|
|
@ -11,18 +11,16 @@ pub fn SkeletonPage() -> impl IntoView {
|
|||
<Demo>
|
||||
<Skeleton repeat=2 text=true/>
|
||||
<Skeleton width="60%" text=true/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Skeleton repeat=2 text=true />
|
||||
<Skeleton width="60%" text=true />
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Skeleton Props"</h3>
|
||||
|
|
|
|||
|
|
@ -12,19 +12,17 @@ pub fn SliderPage() -> impl IntoView {
|
|||
<h1>"Slider"</h1>
|
||||
<Demo>
|
||||
<Slider value/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(0.0);
|
||||
|
||||
<Slider value/>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Slider Props"</h3>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn SpacePage() -> impl IntoView {
|
|||
<Button>"2"</Button>
|
||||
<Button>"3"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<Button>"1"</Button>
|
||||
|
|
@ -25,10 +25,8 @@ pub fn SpacePage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"vertical"</h3>
|
||||
|
|
@ -38,9 +36,9 @@ pub fn SpacePage() -> impl IntoView {
|
|||
<Button>"2"</Button>
|
||||
<Button>"3"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space vertical=true>
|
||||
<Button>"1"</Button>
|
||||
|
|
@ -49,10 +47,8 @@ pub fn SpacePage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"gap"</h3>
|
||||
|
|
@ -67,9 +63,9 @@ pub fn SpacePage() -> impl IntoView {
|
|||
<Button>"2"</Button>
|
||||
<Button>"3"</Button>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space gap=SpaceGap::Large>
|
||||
<Button>"1"</Button>
|
||||
|
|
@ -83,10 +79,8 @@ pub fn SpacePage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Space Props"</h3>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ pub fn SwitchPage() -> impl IntoView {
|
|||
<h1>"Switch"</h1>
|
||||
<Demo>
|
||||
<Switch value/>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(false);
|
||||
view! {
|
||||
|
|
@ -21,10 +21,8 @@ pub fn SwitchPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Swith Props"</h3>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ pub fn TabbarPage() -> impl IntoView {
|
|||
<h1>"Tabbar"</h1>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal(String::from("o"));
|
||||
|
||||
|
|
@ -33,10 +33,8 @@ pub fn TabbarPage() -> impl IntoView {
|
|||
</Tabbar>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Tabbar Props"</h3>
|
||||
|
|
@ -53,7 +51,7 @@ pub fn TabbarPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"value"</td>
|
||||
<td>"RwSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Tabbar's value."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -78,7 +76,7 @@ pub fn TabbarPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"key"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"The indentifier of the tabbar item."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ pub fn TablePage() -> impl IntoView {
|
|||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Table>
|
||||
<thead>
|
||||
|
|
@ -57,10 +57,8 @@ pub fn TablePage() -> impl IntoView {
|
|||
</Table>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Table Props"</h3>
|
||||
|
|
@ -78,18 +76,18 @@ pub fn TablePage() -> impl IntoView {
|
|||
<td>"single_row"</td>
|
||||
<td>"MaybeSignal<bool>"</td>
|
||||
<td>"true"</td>
|
||||
<td>""</td>
|
||||
<td>"Default::default()"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"single_column"</td>
|
||||
<td>"MaybeSignal<bool>"</td>
|
||||
<td>"false"</td>
|
||||
<td>""</td>
|
||||
<td>"Default::default()"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"style"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Table's style."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ pub fn TabsPage() -> impl IntoView {
|
|||
"pear"
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let value = create_rw_signal("apple");
|
||||
<Tabs value>
|
||||
|
|
@ -33,10 +33,8 @@ pub fn TabsPage() -> impl IntoView {
|
|||
</Tabs>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Tabs Props"</h3>
|
||||
|
|
@ -53,7 +51,7 @@ pub fn TabsPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"value"</td>
|
||||
<td>"RwSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Tabs value."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -10,22 +10,14 @@ pub fn TagPage() -> impl IntoView {
|
|||
<h1>"Tag"</h1>
|
||||
<Demo>
|
||||
<Space>
|
||||
<Tag>
|
||||
"default"
|
||||
</Tag>
|
||||
<Tag variant=TagVariant::Success>
|
||||
"success"
|
||||
</Tag>
|
||||
<Tag variant=TagVariant::Warning>
|
||||
"warning"
|
||||
</Tag>
|
||||
<Tag variant=TagVariant::Error>
|
||||
"error"
|
||||
</Tag>
|
||||
<Tag>"default"</Tag>
|
||||
<Tag variant=TagVariant::Success>"success"</Tag>
|
||||
<Tag variant=TagVariant::Warning>"warning"</Tag>
|
||||
<Tag variant=TagVariant::Error>"error"</Tag>
|
||||
</Space>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
<Space>
|
||||
<Tag>
|
||||
|
|
@ -43,10 +35,8 @@ pub fn TagPage() -> impl IntoView {
|
|||
</Space>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Tag Props"</h3>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ pub fn ThemePage() -> impl IntoView {
|
|||
</Space>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let theme = create_rw_signal(Theme::light());
|
||||
|
||||
|
|
@ -45,19 +45,17 @@ pub fn ThemePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"GlobalStyle"</h3>
|
||||
<p>"You can use GlobalStyle to sync common global style to the body element."</p>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let theme = create_rw_signal(Theme::light());
|
||||
|
||||
|
|
@ -69,10 +67,8 @@ pub fn ThemePage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"CustomizeTheme"</h3>
|
||||
|
|
@ -87,9 +83,9 @@ pub fn ThemePage() -> impl IntoView {
|
|||
</Space>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r##"
|
||||
let customize_theme = create_rw_signal(Theme::light());
|
||||
let on_customize_theme = move |_| {
|
||||
|
|
@ -112,10 +108,8 @@ pub fn ThemePage() -> impl IntoView {
|
|||
}
|
||||
"##,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"ThemeProvider Props"</h3>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ pub fn ToastPage() -> impl IntoView {
|
|||
<h1>"Toast"</h1>
|
||||
<Demo>
|
||||
""
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let count = create_rw_signal(0u32);
|
||||
let onclick = move |_| {
|
||||
|
|
@ -30,10 +30,8 @@ pub fn ToastPage() -> impl IntoView {
|
|||
};
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Toast Methods"</h3>
|
||||
|
|
|
|||
|
|
@ -18,13 +18,11 @@ pub fn UploadPage() -> impl IntoView {
|
|||
<h1>"Upload"</h1>
|
||||
<Demo>
|
||||
<Upload custom_request>
|
||||
<Button>
|
||||
"Upload"
|
||||
</Button>
|
||||
<Button>"Upload"</Button>
|
||||
</Upload>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let message = use_message();
|
||||
let custom_request = move |file_list: FileList| {
|
||||
|
|
@ -43,22 +41,18 @@ pub fn UploadPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Drag to upload"</h3>
|
||||
<Demo>
|
||||
<Upload custom_request>
|
||||
<UploadDragger>
|
||||
"Click or drag a file to this area to upload"
|
||||
</UploadDragger>
|
||||
<UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
|
||||
</Upload>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
<DemoCode slot>
|
||||
|
||||
{highlight_str!(
|
||||
r#"
|
||||
let message = use_message();
|
||||
let custom_request = move |file_list: FileList| {
|
||||
|
|
@ -77,10 +71,8 @@ pub fn UploadPage() -> impl IntoView {
|
|||
}
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
)}
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Upload Props"</h3>
|
||||
|
|
@ -97,7 +89,7 @@ pub fn UploadPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"accept"</td>
|
||||
<td>"MaybeSignal<String>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"The accept type of upload."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -109,7 +101,7 @@ pub fn UploadPage() -> impl IntoView {
|
|||
<tr>
|
||||
<td>"custom_request"</td>
|
||||
<td>"Option<Callback<FileList, ()>>"</td>
|
||||
<td>r#""""#</td>
|
||||
<td>"Default::default()"</td>
|
||||
<td>"Customize upload request."</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
13
examples/ssr_axum/.gitignore
vendored
Normal file
13
examples/ssr_axum/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# Generated by Cargo
|
||||
# will have compiled files and executables
|
||||
/target/
|
||||
pkg
|
||||
|
||||
# These are backup files generated by rustfmt
|
||||
**/*.rs.bk
|
||||
|
||||
# node e2e test tools and outputs
|
||||
node_modules/
|
||||
test-results/
|
||||
end2end/playwright-report/
|
||||
playwright/.cache/
|
||||
120
examples/ssr_axum/Cargo.toml
Normal file
120
examples/ssr_axum/Cargo.toml
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
[package]
|
||||
name = "ssr_axum"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[dependencies]
|
||||
axum = { version = "0.6.4", optional = true }
|
||||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
cfg-if = "1"
|
||||
leptos = { version = "0.5" }
|
||||
leptos_axum = { version = "0.5", optional = true }
|
||||
leptos_meta = { version = "0.5" }
|
||||
leptos_router = { version = "0.5" }
|
||||
log = "0.4"
|
||||
simple_logger = "4"
|
||||
tokio = { version = "1.25.0", optional = true }
|
||||
tower = { version = "0.4.13", optional = true }
|
||||
tower-http = { version = "0.4", features = ["fs"], optional = true }
|
||||
wasm-bindgen = "=0.2.88"
|
||||
thiserror = "1.0.38"
|
||||
tracing = { version = "0.1.37", optional = true }
|
||||
http = "0.2.8"
|
||||
demo = { path = "../../demo", default-features = false }
|
||||
|
||||
[features]
|
||||
hydrate = [
|
||||
"leptos/hydrate",
|
||||
"leptos_meta/hydrate",
|
||||
"leptos_router/hydrate",
|
||||
"demo/hydrate",
|
||||
]
|
||||
ssr = [
|
||||
"dep:axum",
|
||||
"dep:tokio",
|
||||
"dep:tower",
|
||||
"dep:tower-http",
|
||||
"dep:leptos_axum",
|
||||
"leptos/ssr",
|
||||
"leptos_meta/ssr",
|
||||
"leptos_router/ssr",
|
||||
"dep:tracing",
|
||||
"demo/ssr",
|
||||
]
|
||||
|
||||
# Defines a size-optimized profile for the WASM bundle in release mode
|
||||
[profile.wasm-release]
|
||||
inherits = "release"
|
||||
opt-level = 'z'
|
||||
lto = true
|
||||
codegen-units = 1
|
||||
panic = "abort"
|
||||
|
||||
[package.metadata.leptos]
|
||||
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
|
||||
output-name = "ssr_axum"
|
||||
|
||||
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
|
||||
site-root = "target/site"
|
||||
|
||||
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
|
||||
# Defaults to pkg
|
||||
site-pkg-dir = "thaw"
|
||||
|
||||
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
|
||||
# style-file = "style/main.scss"
|
||||
# Assets source dir. All files found here will be copied and synchronized to site-root.
|
||||
# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
|
||||
#
|
||||
# Optional. Env: LEPTOS_ASSETS_DIR.
|
||||
assets-dir = "public"
|
||||
|
||||
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
|
||||
site-addr = "127.0.0.1:3000"
|
||||
|
||||
# The port to use for automatic reload monitoring
|
||||
reload-port = 3001
|
||||
|
||||
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
|
||||
# [Windows] for non-WSL use "npx.cmd playwright test"
|
||||
# This binary name can be checked in Powershell with Get-Command npx
|
||||
end2end-cmd = "npx playwright test"
|
||||
end2end-dir = "end2end"
|
||||
|
||||
# The browserlist query used for optimizing the CSS.
|
||||
browserquery = "defaults"
|
||||
|
||||
# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
|
||||
watch = false
|
||||
|
||||
# The environment Leptos will run in, usually either "DEV" or "PROD"
|
||||
env = "DEV"
|
||||
|
||||
# The features to use when compiling the bin target
|
||||
#
|
||||
# Optional. Can be over-ridden with the command line parameter --bin-features
|
||||
bin-features = ["ssr"]
|
||||
|
||||
# If the --no-default-features flag should be used when compiling the bin target
|
||||
#
|
||||
# Optional. Defaults to false.
|
||||
bin-default-features = false
|
||||
|
||||
# The features to use when compiling the lib target
|
||||
#
|
||||
# Optional. Can be over-ridden with the command line parameter --lib-features
|
||||
lib-features = ["hydrate"]
|
||||
|
||||
# If the --no-default-features flag should be used when compiling the lib target
|
||||
#
|
||||
# Optional. Defaults to false.
|
||||
lib-default-features = false
|
||||
|
||||
# The profile to use for the lib target when compiling for release
|
||||
#
|
||||
# Optional. Defaults to "release".
|
||||
lib-profile-release = "wasm-release"
|
||||
21
examples/ssr_axum/LICENSE
Normal file
21
examples/ssr_axum/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2022 henrik
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
86
examples/ssr_axum/README.md
Normal file
86
examples/ssr_axum/README.md
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<picture>
|
||||
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
|
||||
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
|
||||
</picture>
|
||||
|
||||
# Leptos Axum Starter Template
|
||||
|
||||
This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool using [Axum](https://github.com/tokio-rs/axum).
|
||||
|
||||
## Creating your template repo
|
||||
|
||||
If you don't have `cargo-leptos` installed you can install it with
|
||||
|
||||
```bash
|
||||
cargo install cargo-leptos
|
||||
```
|
||||
|
||||
Then run
|
||||
```bash
|
||||
cargo leptos new --git leptos-rs/start-axum
|
||||
```
|
||||
|
||||
to generate a new project template.
|
||||
|
||||
```bash
|
||||
cd ssr_axum
|
||||
```
|
||||
|
||||
to go to your newly created project.
|
||||
Feel free to explore the project structure, but the best place to start with your application code is in `src/app.rs`.
|
||||
Addtionally, Cargo.toml may need updating as new versions of the dependencies are released, especially if things are not working after a `cargo update`.
|
||||
|
||||
## Running your project
|
||||
|
||||
```bash
|
||||
cargo leptos watch
|
||||
```
|
||||
|
||||
## Installing Additional Tools
|
||||
|
||||
By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
|
||||
|
||||
1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
|
||||
2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
|
||||
3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
|
||||
4. `npm install -g sass` - install `dart-sass` (should be optional in future
|
||||
|
||||
## Compiling for Release
|
||||
```bash
|
||||
cargo leptos build --release
|
||||
```
|
||||
|
||||
Will generate your server binary in target/server/release and your site package in target/site
|
||||
|
||||
## Testing Your Project
|
||||
```bash
|
||||
cargo leptos end-to-end
|
||||
```
|
||||
|
||||
```bash
|
||||
cargo leptos end-to-end --release
|
||||
```
|
||||
|
||||
Cargo-leptos uses Playwright as the end-to-end test tool.
|
||||
Tests are located in end2end/tests directory.
|
||||
|
||||
## Executing a Server on a Remote Machine Without the Toolchain
|
||||
After running a `cargo leptos build --release` the minimum files needed are:
|
||||
|
||||
1. The server binary located in `target/server/release`
|
||||
2. The `site` directory and all files within located in `target/site`
|
||||
|
||||
Copy these files to your remote server. The directory structure should be:
|
||||
```text
|
||||
ssr_axum
|
||||
site/
|
||||
```
|
||||
Set the following environment variables (updating for your project as needed):
|
||||
```text
|
||||
LEPTOS_OUTPUT_NAME="ssr_axum"
|
||||
LEPTOS_SITE_ROOT="site"
|
||||
LEPTOS_SITE_PKG_DIR="pkg"
|
||||
LEPTOS_SITE_ADDR="127.0.0.1:3000"
|
||||
LEPTOS_RELOAD_PORT="3001"
|
||||
```
|
||||
Finally, run the server binary.
|
||||
74
examples/ssr_axum/end2end/package-lock.json
generated
Normal file
74
examples/ssr_axum/end2end/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"name": "end2end",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "end2end",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
|
||||
"integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/node": "*",
|
||||
"playwright-core": "1.28.0"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.11.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
|
||||
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.28.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
|
||||
"integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@playwright/test": {
|
||||
"version": "1.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
|
||||
"integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/node": "*",
|
||||
"playwright-core": "1.28.0"
|
||||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "18.11.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
|
||||
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
|
||||
"dev": true
|
||||
},
|
||||
"playwright-core": {
|
||||
"version": "1.28.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
|
||||
"integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
13
examples/ssr_axum/end2end/package.json
Normal file
13
examples/ssr_axum/end2end/package.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"name": "end2end",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.0"
|
||||
}
|
||||
}
|
||||
107
examples/ssr_axum/end2end/playwright.config.ts
Normal file
107
examples/ssr_axum/end2end/playwright.config.ts
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import type { PlaywrightTestConfig } from "@playwright/test";
|
||||
import { devices } from "@playwright/test";
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// require('dotenv').config();
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
const config: PlaywrightTestConfig = {
|
||||
testDir: "./tests",
|
||||
/* Maximum time one test can run for. */
|
||||
timeout: 30 * 1000,
|
||||
expect: {
|
||||
/**
|
||||
* Maximum time expect() should wait for the condition to be met.
|
||||
* For example in `await expect(locator).toHaveText();`
|
||||
*/
|
||||
timeout: 5000,
|
||||
},
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Retry on CI only */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: "html",
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||
actionTimeout: 0,
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
// baseURL: 'http://localhost:3000',
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: "on-first-retry",
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: {
|
||||
...devices["Desktop Chrome"],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "firefox",
|
||||
use: {
|
||||
...devices["Desktop Firefox"],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: "webkit",
|
||||
use: {
|
||||
...devices["Desktop Safari"],
|
||||
},
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
// use: {
|
||||
// ...devices['Pixel 5'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Mobile Safari',
|
||||
// use: {
|
||||
// ...devices['iPhone 12'],
|
||||
// },
|
||||
// },
|
||||
|
||||
/* Test against branded browsers. */
|
||||
// {
|
||||
// name: 'Microsoft Edge',
|
||||
// use: {
|
||||
// channel: 'msedge',
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'Google Chrome',
|
||||
// use: {
|
||||
// channel: 'chrome',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
|
||||
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
|
||||
// outputDir: 'test-results/',
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
// webServer: {
|
||||
// command: 'npm run start',
|
||||
// port: 3000,
|
||||
// },
|
||||
};
|
||||
|
||||
export default config;
|
||||
9
examples/ssr_axum/end2end/tests/example.spec.ts
Normal file
9
examples/ssr_axum/end2end/tests/example.spec.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test("homepage has title and links to intro page", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/");
|
||||
|
||||
await expect(page).toHaveTitle("Welcome to Leptos");
|
||||
|
||||
await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
|
||||
});
|
||||
BIN
examples/ssr_axum/public/favicon.ico
Normal file
BIN
examples/ssr_axum/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
4
examples/ssr_axum/public/thaw/grid_dot.svg
Normal file
4
examples/ssr_axum/public/thaw/grid_dot.svg
Normal 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" />
|
||||
<rect x="23" y="23" width="4" height="4" rx="2" fill="#cbd5e1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 204 B |
11
examples/ssr_axum/public/thaw/logo.svg
Normal file
11
examples/ssr_axum/public/thaw/logo.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="12" fill="#0078ff" />
|
||||
<path
|
||||
d="M21 11h-3.17l2.54-2.54a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0L15 11h-2V9l3.95-3.95c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0L13 6.17V3c0-.55-.45-1-1-1s-1 .45-1 1v3.17L8.46 3.63a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42L11 9v2H9L5.05 7.05c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L6.17 11H3c-.55 0-1 .45-1 1s.45 1 1 1h3.17l-2.54 2.54a.996.996 0 0 0 0 1.41c.39.39 1.03.39 1.42 0L9 13h2v2l-3.95 3.95c-.39.39-.39 1.03 0 1.42c.39.39 1.02.39 1.41 0L11 17.83V21c0 .55.45 1 1 1s1-.45 1-1v-3.17l2.54 2.54c.39.39 1.02.39 1.41 0c.39-.39.39-1.03 0-1.42L13 15v-2h2l3.95 3.95c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41L17.83 13H21c.55 0 1-.45 1-1s-.45-1-1-1z"
|
||||
fill="#fff">
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 897 B |
40
examples/ssr_axum/src/fileserv.rs
Normal file
40
examples/ssr_axum/src/fileserv.rs
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
use cfg_if::cfg_if;
|
||||
|
||||
cfg_if! { if #[cfg(feature = "ssr")] {
|
||||
use axum::{
|
||||
body::{boxed, Body, BoxBody},
|
||||
extract::State,
|
||||
response::IntoResponse,
|
||||
http::{Request, Response, StatusCode, Uri},
|
||||
};
|
||||
use axum::response::Response as AxumResponse;
|
||||
use tower::ServiceExt;
|
||||
use tower_http::services::ServeDir;
|
||||
use leptos::*;
|
||||
use demo::App;
|
||||
|
||||
pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
|
||||
let root = options.site_root.clone();
|
||||
let res = get_static_file(uri.clone(), &root).await.unwrap();
|
||||
|
||||
if res.status() == StatusCode::OK {
|
||||
res.into_response()
|
||||
} else {
|
||||
let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<App/>});
|
||||
handler(req).await.into_response()
|
||||
}
|
||||
}
|
||||
|
||||
async fn get_static_file(uri: Uri, root: &str) -> Result<Response<BoxBody>, (StatusCode, String)> {
|
||||
let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
|
||||
// `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
|
||||
// This path is relative to the cargo root
|
||||
match ServeDir::new(root).oneshot(req).await {
|
||||
Ok(res) => Ok(res.map(boxed)),
|
||||
Err(err) => Err((
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("Something went wrong: {err}"),
|
||||
)),
|
||||
}
|
||||
}
|
||||
}}
|
||||
17
examples/ssr_axum/src/lib.rs
Normal file
17
examples/ssr_axum/src/lib.rs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
use cfg_if::cfg_if;
|
||||
pub mod fileserv;
|
||||
|
||||
cfg_if! { if #[cfg(feature = "hydrate")] {
|
||||
use leptos::*;
|
||||
use wasm_bindgen::prelude::wasm_bindgen;
|
||||
use demo::App;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn hydrate() {
|
||||
// initializes logging using the `log` crate
|
||||
_ = console_log::init_with_level(log::Level::Debug);
|
||||
console_error_panic_hook::set_once();
|
||||
|
||||
leptos::mount_to_body(App);
|
||||
}
|
||||
}}
|
||||
43
examples/ssr_axum/src/main.rs
Normal file
43
examples/ssr_axum/src/main.rs
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
#[cfg(feature = "ssr")]
|
||||
#[tokio::main]
|
||||
async fn main() {
|
||||
use axum::{routing::post, Router};
|
||||
use demo::App;
|
||||
use leptos::*;
|
||||
use leptos_axum::{generate_route_list, LeptosRoutes};
|
||||
use ssr_axum::fileserv::file_and_error_handler;
|
||||
|
||||
simple_logger::init_with_level(log::Level::Debug).expect("couldn't initialize logging");
|
||||
|
||||
// Setting get_configuration(None) means we'll be using cargo-leptos's env values
|
||||
// For deployment these variables are:
|
||||
// <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
|
||||
// Alternately a file can be specified such as Some("Cargo.toml")
|
||||
// The file would need to be included with the executable when moved to deployment
|
||||
let conf = get_configuration(None).await.unwrap();
|
||||
let leptos_options = conf.leptos_options;
|
||||
let addr = leptos_options.site_addr;
|
||||
let routes = generate_route_list(App);
|
||||
|
||||
// build our application with a route
|
||||
let app = Router::new()
|
||||
.route("/api/*fn_name", post(leptos_axum::handle_server_fns))
|
||||
.leptos_routes(&leptos_options, routes, App)
|
||||
.fallback(file_and_error_handler)
|
||||
.with_state(leptos_options);
|
||||
|
||||
// run our app with hyper
|
||||
// `axum::Server` is a re-export of `hyper::Server`
|
||||
log::info!("listening on http://{}", &addr);
|
||||
axum::Server::bind(&addr)
|
||||
.serve(app.into_make_service())
|
||||
.await
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
#[cfg(not(feature = "ssr"))]
|
||||
pub fn main() {
|
||||
// no client-side main function
|
||||
// unless we want this to work with e.g., Trunk for a purely client-side app
|
||||
// see lib.rs for hydration function instead
|
||||
}
|
||||
|
|
@ -4,8 +4,8 @@ mod theme;
|
|||
use crate::components::{Binder, Follower, FollowerPlacement};
|
||||
use crate::{use_theme, utils::mount_style, Theme};
|
||||
pub use color::*;
|
||||
use leptos::leptos_dom::helpers::WindowListenerHandle;
|
||||
use leptos::*;
|
||||
use leptos::{leptos_dom::helpers::WindowListenerHandle, wasm_bindgen::__rt::IntoJsResult};
|
||||
pub use theme::ColorPickerTheme;
|
||||
|
||||
#[component]
|
||||
|
|
@ -65,6 +65,10 @@ pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoVi
|
|||
let show_popover = move |_| {
|
||||
is_show_popover.set(true);
|
||||
};
|
||||
|
||||
#[cfg(any(feature = "csr", feature = "hydrate"))]
|
||||
{
|
||||
use leptos::wasm_bindgen::__rt::IntoJsResult;
|
||||
let timer = window_event_listener(ev::click, move |ev| {
|
||||
let el = ev.target();
|
||||
let mut el: Option<web_sys::Element> =
|
||||
|
|
@ -84,6 +88,7 @@ pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoVi
|
|||
is_show_popover.set(false);
|
||||
});
|
||||
on_cleanup(move || timer.remove());
|
||||
}
|
||||
|
||||
view! {
|
||||
<Binder target_ref=trigger_ref>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ mod get_placement_style;
|
|||
|
||||
use crate::{
|
||||
components::Teleport,
|
||||
utils::mount_style,
|
||||
utils::{add_event_listener, EventListenerHandle},
|
||||
utils::{mount_style, with_hydration_off},
|
||||
};
|
||||
use get_placement_style::get_follower_placement_style;
|
||||
pub use get_placement_style::FollowerPlacement;
|
||||
|
|
@ -194,7 +194,8 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
|
|||
is_show
|
||||
});
|
||||
|
||||
let children = html::div()
|
||||
let children = with_hydration_off(|| {
|
||||
html::div()
|
||||
.classes("thaw-binder-follower-container")
|
||||
.style("display", move || (!is_show.get()).then_some("none"))
|
||||
.child(
|
||||
|
|
@ -203,7 +204,9 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
|
|||
.node_ref(content_ref)
|
||||
.attr("style", move || content_style.get())
|
||||
.child(children()),
|
||||
);
|
||||
)
|
||||
});
|
||||
|
||||
view! { <Teleport element=children/> }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
use cfg_if::cfg_if;
|
||||
use leptos::{html::AnyElement, *};
|
||||
|
||||
/// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
|
||||
#[component]
|
||||
pub fn Teleport(
|
||||
|
|
@ -7,8 +8,11 @@ pub fn Teleport(
|
|||
#[prop(optional, into)] element: Option<HtmlElement<AnyElement>>,
|
||||
#[prop(optional)] children: Option<Children>,
|
||||
) -> impl IntoView {
|
||||
cfg_if! { if #[cfg(target_arch = "wasm32")] {
|
||||
cfg_if! { if #[cfg(all(target_arch = "wasm32", any(feature = "csr", feature = "hydrate")))] {
|
||||
use leptos::wasm_bindgen::JsCast;
|
||||
use leptos::leptos_dom::Mountable;
|
||||
use crate::utils::with_hydration_off;
|
||||
|
||||
let mount = mount.unwrap_or_else(|| {
|
||||
document()
|
||||
.body()
|
||||
|
|
@ -16,21 +20,41 @@ pub fn Teleport(
|
|||
.unchecked_into()
|
||||
});
|
||||
|
||||
let render_root = if let Some(element) = element {
|
||||
element
|
||||
if let Some(element) = element {
|
||||
let render_root = element;
|
||||
let _ = mount.append_child(&render_root);
|
||||
on_cleanup(move || {
|
||||
let _ = mount.remove_child(&render_root);
|
||||
});
|
||||
} else if let Some(children) = children {
|
||||
html::div().child(children()).into_any()
|
||||
let container = document()
|
||||
.create_element("div")
|
||||
.expect("element creation to work");
|
||||
with_hydration_off(|| {
|
||||
let _ = container.append_child(&children().into_view().get_mountable_node());
|
||||
});
|
||||
|
||||
let render_root = container;
|
||||
let _ = mount.append_child(&render_root);
|
||||
on_cleanup(move || {
|
||||
let _ = mount.remove_child(&render_root);
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
};
|
||||
|
||||
_ = mount.append_child(&render_root);
|
||||
on_cleanup(move || {
|
||||
_ = mount.remove_child(&render_root);
|
||||
});
|
||||
} else {
|
||||
_ = mount;
|
||||
_ = element;
|
||||
_ = children;
|
||||
let _ = mount;
|
||||
#[cfg(not(feature = "ssr"))]
|
||||
{
|
||||
let _ = element;
|
||||
let _ = children;
|
||||
}
|
||||
#[cfg(feature = "ssr")]
|
||||
if element.is_none() {
|
||||
if let Some(children) = children {
|
||||
// Consumed hydration `id`
|
||||
let _ = children();
|
||||
}
|
||||
}
|
||||
}}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ pub fn GlobalStyle() -> impl IntoView {
|
|||
_ = body
|
||||
.style()
|
||||
.set_property("color-scheme", &theme.common.color_scheme);
|
||||
_ = body.style().set_property("margin", "0");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ use crate::{
|
|||
utils::mount_style,
|
||||
Theme,
|
||||
};
|
||||
use leptos::wasm_bindgen::__rt::IntoJsResult;
|
||||
use leptos::*;
|
||||
use std::hash::Hash;
|
||||
pub use theme::SelectTheme;
|
||||
|
|
@ -73,6 +72,10 @@ where
|
|||
let show_menu = move |_| {
|
||||
is_show_menu.set(true);
|
||||
};
|
||||
|
||||
#[cfg(any(feature = "csr", feature = "hydrate"))]
|
||||
{
|
||||
use leptos::wasm_bindgen::__rt::IntoJsResult;
|
||||
let timer = window_event_listener(ev::click, move |ev| {
|
||||
let el = ev.target();
|
||||
let mut el: Option<web_sys::Element> =
|
||||
|
|
@ -92,6 +95,7 @@ where
|
|||
is_show_menu.set(false);
|
||||
});
|
||||
on_cleanup(move || timer.remove());
|
||||
}
|
||||
|
||||
let temp_options = options.clone();
|
||||
let select_option_label = create_memo(move |_| match value.get() {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,24 @@ pub use tab::*;
|
|||
pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
|
||||
mount_style("tabs", include_str!("./tabs.css"));
|
||||
let tab_options_vec = create_rw_signal(vec![]);
|
||||
|
||||
view! {
|
||||
<Provider value=TabsInjection {
|
||||
active_key: value,
|
||||
tab_options_vec,
|
||||
}>
|
||||
<TabsInner value tab_options_vec children/>
|
||||
</Provider>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn TabsInner(
|
||||
value: RwSignal<String>,
|
||||
tab_options_vec: RwSignal<Vec<TabOption>>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("tabs", include_str!("./tabs.css"));
|
||||
let theme = use_theme(Theme::light);
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
|
|
@ -35,11 +53,8 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
|
|||
});
|
||||
let label_list_ref = create_node_ref::<html::Div>();
|
||||
|
||||
let children = children();
|
||||
view! {
|
||||
<Provider value=TabsInjection {
|
||||
active_key: value,
|
||||
tab_options_vec,
|
||||
}>
|
||||
<div class="thaw-tabs" style=move || css_vars.get()>
|
||||
<div class="thaw-tabs__label-list" ref=label_list_ref>
|
||||
<For
|
||||
|
|
@ -51,11 +66,9 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
|
|||
create_effect({
|
||||
let key = key.clone();
|
||||
move |_| {
|
||||
let Some(label) = label_ref.get() else {
|
||||
return;
|
||||
let Some(label) = label_ref.get() else { return;
|
||||
};
|
||||
let Some(label_list) = label_list_ref.get() else {
|
||||
return;
|
||||
let Some(label_list) = label_list_ref.get() else { return;
|
||||
};
|
||||
if key.clone() == value.get() {
|
||||
request_animation_frame(move || {
|
||||
|
|
@ -98,9 +111,8 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
|
|||
|
||||
<span class="thaw-tabs-label__line" style=move || label_line_style.get()></span>
|
||||
</div>
|
||||
<div>{children()}</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
</Provider>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use ::wasm_bindgen::{prelude::Closure, JsCast};
|
||||
use leptos::{html::AnyElement, *};
|
||||
use wasm_bindgen::{prelude::Closure, JsCast};
|
||||
|
||||
pub fn add_event_listener<E: ev::EventDescriptor + 'static>(
|
||||
target: HtmlElement<AnyElement>,
|
||||
|
|
|
|||
|
|
@ -13,3 +13,15 @@ pub(crate) use mount_style::mount_style;
|
|||
pub(crate) use provider::Provider;
|
||||
pub use signal::SignalWatch;
|
||||
pub(crate) use stored_maybe_signal::*;
|
||||
|
||||
pub(crate) fn with_hydration_off<T>(f: impl FnOnce() -> T) -> T {
|
||||
#[cfg(feature = "hydrate")]
|
||||
{
|
||||
use leptos::leptos_dom::HydrationCtx;
|
||||
HydrationCtx::with_hydration_off(f)
|
||||
}
|
||||
#[cfg(not(feature = "hydrate"))]
|
||||
{
|
||||
f()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
use leptos::document;
|
||||
use cfg_if::cfg_if;
|
||||
|
||||
pub fn mount_style(id: &str, content: &str) {
|
||||
pub fn mount_style(id: &str, content: &'static str) {
|
||||
cfg_if! {
|
||||
if #[cfg(feature = "ssr")] {
|
||||
use leptos::html::style;
|
||||
use leptos_meta::use_head;
|
||||
let meta = use_head();
|
||||
let style_el = style().attr("csr-id", format!("thaw-{id}")).child(content);
|
||||
meta.tags.register(format!("leptos-thaw-{id}").into(), style_el.into_any());
|
||||
} else {
|
||||
use leptos::document;
|
||||
let head = document().head().expect("head no exist");
|
||||
let style = head
|
||||
.query_selector(&format!("style[csr-id=\"thaw-{id}\"]"))
|
||||
.expect("query style element error");
|
||||
|
||||
#[cfg(feature = "hydrate")]
|
||||
let _ = leptos::leptos_dom::HydrationCtx::id();
|
||||
|
||||
if style.is_some() {
|
||||
return;
|
||||
}
|
||||
|
|
@ -18,3 +30,5 @@ pub fn mount_style(id: &str, content: &str) {
|
|||
|
||||
_ = head.append_child(&style);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue