adam/leptos-use
1
0
Fork 0
mirror of https://github.com/adoyle0/leptos-use.git synced 2025-01-23 00:59:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

rustfmt for all examples

Browse source
This commit is contained in:
Maccesch 2023-07-27 19:48:21 +01:00
parent 2e08874db0
commit 9a998b1dd4
42 changed files with 642 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
examples/on_click_outside/src/main.rs
View file

@ -10,19 +10,27 @@ fn Demo() -> impl IntoView {
let _ = on_click_outside(modal_ref, move |_| set_show_modal.set(false));
view! { <button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
view! {
<button on:click=move |_| set_show_modal.set(true)>"Open Modal"</button>
<Show when=move || show_modal.get() fallback=|| ()>
<div node_ref=modal_ref class="modal">
<div class="inner">
<button class="button small" title="Close" on:click=move |_| set_show_modal.set(false)>"𝖷"</button>
<button
class="button small"
title="Close"
on:click=move |_| set_show_modal.set(false)
>
"𝖷"
</button>
<p class="heading">"Demo Modal"</p>
<p>"Click outside this modal to close it."</p>
</div>
</div>
</Show>
<style>"
<style>
"
.modal {
position: fixed;
left: 50%;
@ -61,7 +69,8 @@ fn Demo() -> impl IntoView {
margin: 0;
font-weight: bold;
}
"</style>
"
</style>
}
}

10
examples/ssr/src/app.rs
View file

@ -14,7 +14,6 @@ pub fn App() -> impl IntoView {
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/pkg/start-axum.css"/>
<Title text="Leptos-Use SSR Example"/>
@ -22,9 +21,7 @@ pub fn App() -> impl IntoView {
<Router fallback=|| {
let mut outside_errors = Errors::default();
outside_errors.insert_with_default_key(AppError::NotFound);
view! { <ErrorTemplate outside_errors/>
}
.into_view()
view! { <ErrorTemplate outside_errors/> }.into_view()
}>
<main>
<Routes>
@ -67,9 +64,10 @@ fn HomePage() -> impl IntoView {
);
debounced_fn();
view! { <h1>"Leptos-Use SSR Example"</h1>
view! {
<h1>"Leptos-Use SSR Example"</h1>
<button on:click=on_click>"Click Me: " {count}</button>
<p>"Locale \"zh-Hans-CN-u-nu-hanidec\": " { zh_count }</p>
<p>"Locale "zh-Hans-CN-u-nu-hanidec": " {zh_count}</p>
<p>"Press any key: " {key}</p>
<p>"Debounced called: " {debounce_value}</p>
}

3
examples/ssr/src/error_template.rs
View file

@ -53,7 +53,8 @@ pub fn ErrorTemplate(
}
}}
view! { <h1>{if errors.len() > 1 {"Errors"} else {"Error"}}</h1>
view! {
<h1>{if errors.len() > 1 { "Errors" } else { "Error" }}</h1>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move || { errors.clone().into_iter().enumerate() }

3
examples/use_abs/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_abs(value);
view! { <input
view! {
<input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())

12
examples/use_active_element/src/main.rs
View file

@ -15,21 +15,21 @@ fn Demo() -> impl IntoView {
)
};
view! { <Note class="mb-3">"Select the inputs below to see the changes"</Note>
view! {
<Note class="mb-3">"Select the inputs below to see the changes"</Note>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<For
each=move || (1..7)
key=|i| *i
view=move |i| view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i />
view=move |i| {
view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i/> }
}
/>
</div>
<div class="mt-2">
"Current Active Element: "
<span class="text-primary">{ key }</span>
</div>
<div class="mt-2">"Current Active Element: " <span class="text-primary">{key}</span></div>
}
}

157
examples/use_breakpoints/src/main.rs
View file

@ -24,23 +24,30 @@ fn Demo() -> impl IntoView {
let label_classes = "justify-self-end".to_string();
let svg_classes = "align-middle ml-3 mr-1 opacity-60".to_string();
view! { <div class="grid grid-cols-2 gap-x-4 gap-y-3">
view! {
<div class="grid grid-cols-2 gap-x-4 gap-y-3">
<div class=label_classes.clone()>"Current breakpoints :"</div>
<code>{move || format!("{:?}", current.get())}</code>
<div class=label_classes.clone()>
<code class="font-bold">"xs"</code>
<small>
" (< "
{ move || sm_width.to_string() }
"px)"
</small>
<small>" (< " {move || sm_width.to_string()} "px)"</small>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
<path d="M11 4h2" />
<path d="M12 17v.01" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path>
<path d="M11 4h2"></path>
<path d="M12 17v.01"></path>
</svg>
":"
</div>
@ -49,17 +56,23 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"xs"</code>
<small>
" (<= "
{ move || sm_width.to_string() }
"px)"
</small>
<small>" (<= " {move || sm_width.to_string()} "px)"</small>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
<path d="M11 4h2" />
<path d="M12 17v.01" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z"></path>
<path d="M11 4h2"></path>
<path d="M12 17v.01"></path>
</svg>
":"
</div>
@ -69,11 +82,21 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"sm"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
<path d="M20 11v2" />
<path d="M7 12h-.01" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 6m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
<path d="M20 11v2"></path>
<path d="M7 12h-.01"></path>
</svg>
":"
</div>
@ -83,10 +106,20 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"md"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z" />
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16z"></path>
<path d="M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path>
</svg>
":"
</div>
@ -96,10 +129,20 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"lg"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 19l18 0" />
<path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 19l18 0"></path>
<path d="M5 6m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"></path>
</svg>
":"
</div>
@ -109,12 +152,22 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"xl"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z" />
<path d="M7 20h10" />
<path d="M9 16v4" />
<path d="M15 16v4" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z"></path>
<path d="M7 20h10"></path>
<path d="M9 16v4"></path>
<path d="M15 16v4"></path>
</svg>
":"
</div>
@ -124,13 +177,23 @@ fn Demo() -> impl IntoView {
<div class=label_classes.clone()>
<code class="font-bold">"xxl"</code>
<svg xmlns="http://www.w3.org/2000/svg" class=svg_classes.clone() width="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5" />
<path d="M7 20h6.5" />
<path d="M9 16v4" />
<path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" />
<path d="M19 21v1m0 -8v1" />
<svg
xmlns="http://www.w3.org/2000/svg"
class=svg_classes.clone()
width="24"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M13 16h-9a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v5.5"></path>
<path d="M7 20h6.5"></path>
<path d="M9 16v4"></path>
<path d="M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5"></path>
<path d="M19 21v1m0 -8v1"></path>
</svg>
":"
</div>

3
examples/use_ceil/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_ceil(value);
view! { <input
view! {
<input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())

5
examples/use_color_mode/src/main.rs
View file

@ -30,9 +30,8 @@ fn Demo() -> impl IntoView {
UseCycleListOptions::default().initial_value(Some((mode, set_mode).into())),
);
view! { <button on:click=move |_| next()>
{ move || format!("{}", state.get()) }
</button>
view! {
<button on:click=move |_| next()>{move || format!("{}", state.get())}</button>
<Note>"Click to change the color mode"</Note>
}
}

11
examples/use_css_var/src/main.rs
View file

@ -33,16 +33,21 @@ fn Demo() -> impl IntoView {
)
};
view! { <div>
view! {
<div>
<div node_ref=el style="--color: #7fa998; color: var(--color)">
"Sample text, " {color}
"Sample text, "
{color}
</div>
<button on:click=switch_color>"Change color value"</button>
</div>
<div>
<div node_ref=elv style=style class="mt-4">
"Sample text, " {key} ": " {color_val}
"Sample text, "
{key}
": "
{color_val}
</div>
<button on:click=change_var>"Change color variable"</button>
</div>

3
examples/use_cycle_list/src/main.rs
View file

@ -10,7 +10,8 @@ fn Demo() -> impl IntoView {
"Dog", "Cat", "Lizard", "Shark", "Whale", "Dolphin", "Octopus", "Seal",
]);
view! { <div>
view! {
<div>
<div class="text-primary text-lg font-bold">{state}</div>
<button on:click=move |_| { prev() }>"Prev"</button>
<button on:click=move |_| { next() }>"Next"</button>

8
examples/use_debounce_fn/src/main.rs
View file

@ -13,12 +13,12 @@ fn Demo() -> impl IntoView {
DebounceOptions::default().max_wait(Some(5000.0)),
);
view! { <button
on:click=move |_| {
view! {
<button on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1);
debounced_fn();
}
>
}>
"Smash me!"
</button>
<Note>"Delay is set to 1000ms and max_wait is set to 5000ms for this demo."</Note>

3
examples/use_document_visibility/src/main.rs
View file

@ -30,8 +30,7 @@ fn Demo() -> impl IntoView {
false,
);
view! { <div>{ message }</div>
}
view! { <div>{message}</div> }
}
fn main() {

8
examples/use_draggable/src/main.rs
View file

@ -20,7 +20,8 @@ fn Demo() -> impl IntoView {
.prevent_default(true),
);
view! { <p class="italic op50 text-center">
view! {
<p class="italic op50 text-center">
Check the floating box
</p>
<div
@ -30,7 +31,10 @@ fn Demo() -> impl IntoView {
>
"👋 Drag me!"
<div class="text-sm opacity-50">
I am at { move || x().round() }, { move || y().round() }
I am
{move || x().round()}
)
{move || y().round()}
</div>
</div>
}

44
examples/use_drop_zone/src/main.rs
View file

@ -19,30 +19,52 @@ fn Demo() -> impl IntoView {
.on_enter(move |_| set_dropped(false)),
);
view! { <div class="flex">
view! {
<div class="flex">
<div class="w-full h-auto relative">
<p>Drop files into dropZone</p>
<p>
Drop files into dropZone
</p>
<img width="64" src="use_drop_zone/demo/img/leptos-use-logo.svg" alt="Drop me"/>
<div
node_ref=drop_zone_el
class="flex flex-col w-full min-h-[200px] h-auto bg-gray-400/10 justify-center items-center pt-6"
>
<div>
is_over_drop_zone: <BooleanDisplay value=is_over_drop_zone />
is_over_drop_zone:
<BooleanDisplay value=is_over_drop_zone/>
</div>
<div>
dropped: <BooleanDisplay value=dropped />
dropped:
<BooleanDisplay value=dropped/>
</div>
<div class="flex flex-wrap justify-center items-center">
<For each=files key=|f| f.name() view=move |file| {
view! { <div class="w-200px bg-black-200/10 ma-2 pa-6">
<p>Name: {file.name()}</p>
<p>Size: {file.size()}</p>
<p>Type: {file.type_()}</p>
<p>Last modified: {file.last_modified()}</p>
<For
each=files
key=|f| f.name()
view=move |file| {
view! {
<div class="w-200px bg-black-200/10 ma-2 pa-6">
<p>
Name:
{file.name()}
</p>
<p>
Size:
{file.size()}
</p>
<p>
Type:
{file.type_()}
</p>
<p>
Last modified:
{file.last_modified()}
</p>
</div>
}
} />
}
/>
</div>
</div>
</div>

5
examples/use_element_hover/src/main.rs
View file

@ -14,7 +14,10 @@ fn Demo() -> impl IntoView {
.delay_leave(600),
);
view! { <button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
view! {
<button node_ref=el>
{move || if is_hovered.get() { "Thank you!" } else { "Hover me" }}
</button>
}
}

5
examples/use_element_size/src/main.rs
View file

@ -11,13 +11,14 @@ fn Demo() -> impl IntoView {
let text = move || format!("width: {}\nheight: {}", width.get(), height.get());
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
view! {
<Note class="mb-2">"Resize the box to see changes"</Note>
<textarea
node_ref=el
readonly
class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
prop:value=text
/>
></textarea>
}
}

11
examples/use_element_visibility/src/main.rs
View file

@ -9,7 +9,8 @@ fn Demo() -> impl IntoView {
let is_visible = use_element_visibility(el);
view! { <div>
view! {
<div>
<Note class="mb-4">"Info on the right bottom corner"</Note>
<div node_ref=el class="max-w-lg relative area dark:bg-gray-800 shadow-lg z-60">
"Target Element (scroll down)"
@ -17,8 +18,12 @@ fn Demo() -> impl IntoView {
</div>
<div class="float m-5 area shadow-lg">
"Element "
<BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/>
" the viewport"
<BooleanDisplay
value=is_visible
true_str="inside"
false_str="outside"
class="font-bold"
/> " the viewport"
</div>
}
}

15
examples/use_event_listener/src/main.rs
View file

@ -22,11 +22,13 @@ fn Demo() -> impl IntoView {
let (cond, set_cond) = create_signal(true);
view! { <p>"Check in the dev tools console"</p>
view! {
<p>"Check in the dev tools console"</p>
<p>
<label>
<input
type="checkbox" on:change=move |evt| set_cond.set(event_target_checked(&evt))
type="checkbox"
on:change=move |evt| set_cond.set(event_target_checked(&evt))
prop:checked=move || cond.get()
/>
"Condition enabled"
@ -34,13 +36,17 @@ fn Demo() -> impl IntoView {
</p>
<Show
when=move || cond.get()
fallback=move || view! { <a node_ref=element href="#">
fallback=move || {
view! {
<a node_ref=element href="#">
"Condition"
<b>" false "</b>
"[click me]"
</a>
}
}
>
<a node_ref=element href="#">
"Condition "
<b>"true"</b>
@ -55,7 +61,6 @@ fn main() {
console_error_panic_hook::set_once();
mount_to_body(|| {
view! { <Demo />
}
view! { <Demo/> }
})
}

78
examples/use_favicon/src/main.rs
View file

@ -10,41 +10,87 @@ fn Demo() -> impl IntoView {
let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string();
let img_classes = "block".to_string();
view! { <p>"Click on an icon to change the favicon"</p>
view! {
<p>"Click on an icon to change the favicon"</p>
<p class="flex gap-2">
<a class=classes.clone() href="#" on:click=move |e| {
<a
class=classes.clone()
href="#"
on:click=move |e| {
e.prevent_default();
set_icon.set(Some("favicon-leptos.ico".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" />
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-leptos.ico"
alt="favicon-red"
/>
</a>
<a class=classes.clone() href="#" on:click=move |e| {
<a
class=classes.clone()
href="#"
on:click=move |e| {
e.prevent_default();
set_icon.set(Some("favicon-red.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" />
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-red.svg"
alt="favicon-red"
/>
</a>
<a class=classes.clone() href="#" on:click=move |e| {
<a
class=classes.clone()
href="#"
on:click=move |e| {
e.prevent_default();
set_icon.set(Some("favicon-green.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" />
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-green.svg"
alt="favicon-green"
/>
</a>
<a class=classes.clone() href="#" on:click=move |e| {
<a
class=classes.clone()
href="#"
on:click=move |e| {
e.prevent_default();
set_icon.set(Some("favicon-blue.svg".into()));
}>
<img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" />
}
>
<img
class=img_classes.clone()
width="32"
src="use_favicon/demo/img/favicon-blue.svg"
alt="favicon-blue"
/>
</a>
<a class=classes.clone() href="#" on:click=move |e| {
<a
class=classes.clone()
href="#"
on:click=move |e| {
e.prevent_default();
set_icon.set(Some("favicon-orange.svg".into()));
}>
<img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" />
}
>
<img
class=img_classes
width="32"
src="use_favicon/demo/img/favicon-orange.svg"
alt="favicon-orange"
/>
</a>
</p>
}

3
examples/use_floor/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_floor(value);
view! { <input
view! {
<input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())

18
examples/use_intersection_observer/src/main.rs
View file

@ -25,7 +25,8 @@ fn Demo() -> impl IntoView {
UseIntersectionObserverOptions::default().root(Some(root)),
);
view! { <div class="text-center">
view! {
<div class="text-center">
<label class="checkbox">
<input
type="checkbox"
@ -39,6 +40,7 @@ fn Demo() -> impl IntoView {
}
}
/>
<span>"Enabled"</span>
</label>
</div>
@ -52,11 +54,16 @@ fn Demo() -> impl IntoView {
<div class="text-center">
"Element "
<BooleanDisplay value=is_visible true_str="inside" false_str="outside" class="font-bold"/>
" the viewport"
<BooleanDisplay
value=is_visible
true_str="inside"
false_str="outside"
class="font-bold"
/> " the viewport"
</div>
<style>"
<style>
"
.root {
border: 2px dashed #ccc;
height: 200px;
@ -79,7 +86,8 @@ fn Demo() -> impl IntoView {
max-height: 150px;
margin: 0 2rem 400px;
}
"</style>
"
</style>
}
}

3
examples/use_interval/src/main.rs
View file

@ -6,7 +6,8 @@ use leptos_use::{use_interval, UseIntervalReturn};
fn Demo() -> impl IntoView {
let UseIntervalReturn { counter, .. } = use_interval(200);
view! { <div>
view! {
<div>
<p>"Interval fired: " {counter}</p>
</div>
}

11
examples/use_interval_fn/src/main.rs
View file

@ -34,7 +34,8 @@ fn Demo() -> impl IntoView {
interval,
);
view! { <p>{move || word.get()}</p>
view! {
<p>{move || word.get()}</p>
<p>
"Interval:"
<input
@ -48,15 +49,15 @@ fn Demo() -> impl IntoView {
when=move || is_active.get()
fallback=move || {
let resume = resume.clone();
view! { <button on:click=move |_| resume()>"Resume"</button>
}
view! { <button on:click=move |_| resume()>"Resume"</button> }
}
>
{
let pause = pause.clone();
view! { <button on:click=move |_| pause()>"Pause"</button>
}
view! { <button on:click=move |_| pause()>"Pause"</button> }
}
</Show>
}
}

3
examples/use_intl_number_format/src/main.rs
View file

@ -29,7 +29,8 @@ fn Demo() -> impl IntoView {
);
let in_num = in_nf.format::<f64>(number);
view! { <input
view! {
<input
class="block"
prop:value=number
on:input=move |e| set_number(event_target_value(&e).parse().unwrap())

3
examples/use_media_query/src/main.rs
View file

@ -7,7 +7,8 @@ fn Demo() -> impl IntoView {
let is_large_screen = use_media_query("(min-width: 1024px)");
let is_dark_preferred = use_media_query("(prefers-color-scheme: dark)");
view! { <p>"Is large screen: " <BooleanDisplay value=is_large_screen /></p>
view! {
<p>"Is large screen: " <BooleanDisplay value=is_large_screen/></p>
<p>"Is dark preferred: " <BooleanDisplay value=is_dark_preferred/></p>
}
}

21
examples/use_mouse/src/main.rs
View file

@ -33,21 +33,32 @@ fn Demo() -> impl IntoView {
.coord_type(UseMouseCoordType::Custom(Extractor)),
);
view! { <div node_ref=el>
view! {
<div node_ref=el>
<p class="font-semibold">"Basic Usage"</p>
<pre lang="yaml">
{ move || format!(r#" x: {}
{move || {
format!(
r#" x: {}
y: {}
source_type: {:?}
"#, mouse_default.x.get(), mouse_default.y.get(), mouse_default.source_type.get()) }
"#, mouse_default.x.get(),
mouse_default.y.get(), mouse_default.source_type.get()
)
}}
</pre>
<p class="font-semibold">"Extractor Usage"</p>
<Note>"Only works when the mouse is over the demo element"</Note>
<pre lang="yaml">
{ move || format!(r#" x: {}
{move || {
format!(
r#" x: {}
y: {}
source_type: {:?}
"#, mouse_with_extractor.x.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()) }
"#, mouse_with_extractor.x
.get(), mouse_with_extractor.y.get(), mouse_with_extractor.source_type.get()
)
}}
</pre>
</div>
}

6
examples/use_mutation_observer/src/main.rs
View file

@ -43,10 +43,12 @@ fn Demo() -> impl IntoView {
let enum_msgs =
Signal::derive(move || messages.get().into_iter().enumerate().collect::<Vec<_>>());
view! { <div node_ref=el class=move || class_name.get() style=move || style.get()>
view! {
<div node_ref=el class=move || class_name.get() style=move || style.get()>
<For
each=move || enum_msgs.get()
key=|message| message.0 // list only grows so this is fine here
// list only grows so this is fine here
key=|message| message.0
view=|message| view! { <div>"Mutation Attribute: " <code>{message.1}</code></div> }
/>
</div>

14
examples/use_raf_fn/src/main.rs
View file

@ -14,9 +14,17 @@ fn Demo() -> impl IntoView {
set_count.update(|count| *count += 1);
});
view! { <div>Count: { count }</div>
<button on:click=move |_| pause() disabled=move || !is_active()>Pause</button>
<button on:click=move |_| resume() disabled=is_active>Resume</button>
view! {
<div>
Count:
{count}
</div>
<button on:click=move |_| pause() disabled=move || !is_active()>
Pause
</button>
<button on:click=move |_| resume() disabled=is_active>
Resume
</button>
}
}

5
examples/use_resize_observer/src/main.rs
View file

@ -17,13 +17,14 @@ fn Demo() -> impl IntoView {
));
});
view! { <Note class="mb-2">"Resize the box to see changes"</Note>
view! {
<Note class="mb-2">"Resize the box to see changes"</Note>
<textarea
node_ref=el
readonly
class="resize rounded-md p-4 w-[200px] h-[100px] text-2xl leading-10"
prop:value=move || text.get()
/>
></textarea>
}
}

3
examples/use_round/src/main.rs
View file

@ -8,7 +8,8 @@ fn Demo() -> impl IntoView {
let result: Signal<f64> = use_round(value);
view! { <input
view! {
<input
class="block"
prop:value=move || value.get()
on:input=move |e| set_value.set(event_target_value(&e).parse().unwrap())

66
examples/use_scroll/src/main.rs
View file

@ -42,33 +42,29 @@ fn Demo() -> impl IntoView {
.on_scroll(on_scroll.clone()),
);
view! { <div class="flex">
<div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded">
view! {
<div class="flex">
<div
node_ref=el
class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded"
>
<div class="w-[500px] h-[400px] relative">
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
"top_left"
</div>
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">"top_left"</div>
<div class="absolute left-0 bottom-0 bg-gray-500/5 px-2 py-1">
"bottom_left"
</div>
<div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1">
"top_right"
</div>
<div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1">"top_right"</div>
<div class="absolute right-0 bottom-0 bg-gray-500/5 px-2 py-1">
"bottom_right"
</div>
<div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1">
"Scroll Me"
</div>
<div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1">"Scroll Me"</div>
</div>
</div>
<div class="my-10 w-280px pl-4">
<div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5">
<span class="text-right opacity-75 py-4">
"X Position"
</span>
<span class="text-right opacity-75 py-4">"X Position"</span>
<div class="text-primary">
<div>
<input
@ -78,6 +74,7 @@ fn Demo() -> impl IntoView {
set_x(num);
}
}
type="number"
min="0"
max="200"
@ -85,9 +82,7 @@ fn Demo() -> impl IntoView {
/>
</div>
</div>
<span class="text-right opacity-75 py-4">
"Y Position"
</span>
<span class="text-right opacity-75 py-4">"Y Position"</span>
<div class="text-primary">
<div>
<input
@ -97,6 +92,7 @@ fn Demo() -> impl IntoView {
set_y(num);
}
}
type="number"
min="0"
max="200"
@ -115,41 +111,23 @@ fn Demo() -> impl IntoView {
type="checkbox"
/>
</span>
<span class="text-right opacity-75">
"Is Scrolling"
</span>
<span class="text-right opacity-75">"Is Scrolling"</span>
<BooleanDisplay value=is_scrolling/>
<div class="text-right opacity-75">
"Top Arrived"
</div>
<div class="text-right opacity-75">"Top Arrived"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().top)/>
<div class="text-right opacity-75">
"Right Arrived"
</div>
<div class="text-right opacity-75">"Right Arrived"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().right)/>
<div class="text-right opacity-75">
"Bottom Arrived"
</div>
<div class="text-right opacity-75">"Bottom Arrived"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().bottom)/>
<div class="text-right opacity-75">
"Left Arrived"
</div>
<div class="text-right opacity-75">"Left Arrived"</div>
<BooleanDisplay value=Signal::derive(move || arrived_state.get().left)/>
<div class="text-right opacity-75">
"Scrolling Up"
</div>
<div class="text-right opacity-75">"Scrolling Up"</div>
<BooleanDisplay value=Signal::derive(move || directions.get().top)/>
<div class="text-right opacity-75">
"Scrolling Right"
</div>
<div class="text-right opacity-75">"Scrolling Right"</div>
<BooleanDisplay value=Signal::derive(move || directions.get().right)/>
<div class="text-right opacity-75">
"Scrolling Down"
</div>
<div class="text-right opacity-75">"Scrolling Down"</div>
<BooleanDisplay value=Signal::derive(move || directions.get().bottom)/>
<div class="text-right opacity-75">
"Scrolling Left"
</div>
<div class="text-right opacity-75">"Scrolling Left"</div>
<BooleanDisplay value=Signal::derive(move || directions.get().left)/>
</div>
</div>

22
examples/use_storage/src/main.rs
View file

@ -24,7 +24,8 @@ fn Demo() -> impl IntoView {
let (state2, ..) = use_storage("banana-state", the_default.clone());
view! { <input
view! {
<input
class="block"
prop:value=move || state.get().name
on:input=move |e| set_state.update(|s| s.name = event_target_value(&e))
@ -46,20 +47,27 @@ fn Demo() -> impl IntoView {
class="block"
prop:value=move || state.get().count
value=move || state.get().count
on:input=move |e| set_state.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
on:input=move |e| {
set_state
.update(|s| s.count = event_target_value(&e).parse::<f64>().unwrap() as u32)
}
type="number"
min="0"
step="1"
max="1000"
/>
<p>"Second "<b><code>"use_storage"</code></b>":"</p>
<p>
"Second " <b>
<code>"use_storage"</code>
</b> ":"
</p>
<pre>
{ move || format!("{:#?}", state2.get()) }
</pre>
<pre>{move || format!("{:#?}", state2.get())}</pre>
<Note>"The values are persistent. When you reload the page the values will be the same."</Note>
<Note>
"The values are persistent. When you reload the page the values will be the same."
</Note>
}
}

8
examples/use_throttle_fn/src/main.rs
View file

@ -12,12 +12,12 @@ fn Demo() -> impl IntoView {
1000.0,
);
view! { <button
on:click=move |_| {
view! {
<button on:click=move |_| {
set_click_count.set(click_count.get_untracked() + 1);
throttled_fn();
}
>
}>
"Smash me!"
</button>
<Note>"Delay is set to 1000ms for this demo."</Note>

51
examples/use_websocket/src/main.rs
View file

@ -152,18 +152,32 @@ fn Demo() -> impl IntoView {
let connected2 = move || ready_state2.get() == UseWebSocketReadyState::Open;
view! { <div class="container">
view! {
<div class="container">
<div class="flex flex-col lg:flex-row gap-4">
<div class="w-full lg:w-1/2">
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket"</h1>
<p>"status: " {status}</p>
<button on:click=send_message disabled=move || !connected()>"Send"</button>
<button on:click=send_byte_message disabled=move || !connected()>"Send bytes"</button>
<button on:click=open_connection disabled=connected>"Open"</button>
<button on:click=close_connection disabled=move || !connected()>"Close"</button>
<button on:click=send_message disabled=move || !connected()>
"Send"
</button>
<button on:click=send_byte_message disabled=move || !connected()>
"Send bytes"
</button>
<button on:click=open_connection disabled=connected>
"Open"
</button>
<button on:click=close_connection disabled=move || !connected()>
"Close"
</button>
<div class="flex items-center">
<h3 class="text-2xl mr-2">"History"</h3>
<button on:click=move |_| set_history(vec![]) disabled=move || history.get().len() <= 0>"Clear"</button>
<button
on:click=move |_| set_history(vec![])
disabled=move || history.get().len() <= 0
>
"Clear"
</button>
</div>
<For
each=move || history.get().into_iter().enumerate()
@ -177,13 +191,26 @@ fn Demo() -> impl IntoView {
<div class="w-full lg:w-1/2">
<h1 class="text-xl lg:text-4xl mb-2">"use_websocket_with_options"</h1>
<p>"status: " {status2}</p>
<button on:click=open_connection2 disabled={connected2}>"Connect"</button>
<button on:click=close_connection2 disabled=move || !connected2()>"Close"</button>
<button on:click=send_message2 disabled=move || !connected2()>"Send"</button>
<button on:click=send_byte_message2 disabled=move || !connected2()>"Send Bytes"</button>
<button on:click=open_connection2 disabled=connected2>
"Connect"
</button>
<button on:click=close_connection2 disabled=move || !connected2()>
"Close"
</button>
<button on:click=send_message2 disabled=move || !connected2()>
"Send"
</button>
<button on:click=send_byte_message2 disabled=move || !connected2()>
"Send Bytes"
</button>
<div class="flex items-center">
<h3 class="text-2xl mr-2">"History"</h3>
<button on:click=move |_| set_history2(vec![]) disabled=move || history2.get().len() <= 0>"Clear"</button>
<button
on:click=move |_| set_history2(vec![])
disabled=move || history2.get().len() <= 0
>
"Clear"
</button>
</div>
<ul>
<For
@ -193,11 +220,11 @@ fn Demo() -> impl IntoView {
view! { <li>{message}</li> }
}
/>
</ul>
</div>
</div>
</div>
}
}

3
examples/use_window_focus/src/main.rs
View file

@ -22,8 +22,7 @@ fn Demo() -> impl IntoView {
false,
);
view! { <div>{ message }</div>
}
view! { <div>{message}</div> }
}
fn main() {

18
examples/use_window_scroll/src/main.rs
View file

@ -15,12 +15,20 @@ fn Demo() -> impl IntoView {
document().body().unwrap().append_child(&div).unwrap();
view! { <div>See scroll values in the lower right corner of the screen.</div>
<div class="float m-5 area shadow-lg">
<Note class="mb-2">Scroll value</Note>
view! {
<div>
x: { move || format!("{:.1}", x()) } <br />
y: { move || format!("{:.1}", y()) }
See scroll values in the lower right corner of the screen.
</div>
<div class="float m-5 area shadow-lg">
<Note class="mb-2">
Scroll value
</Note>
<div>
x:
{move || format!("{:.1}", x())}
<br/>
y:
{move || format!("{:.1}", y())}
</div>
</div>
}

3
examples/watch_debounced/src/main.rs
View file

@ -16,7 +16,8 @@ fn Demo() -> impl IntoView {
WatchDebouncedOptions::default().max_wait(Some(5000.0)),
);
view! { <input
view! {
<input
class="block"
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))

11
examples/watch_pausable/src/main.rs
View file

@ -33,7 +33,8 @@ fn Demo() -> impl IntoView {
resume();
};
view! { <Note class="mb-2">"Type something below to trigger the watch"</Note>
view! {
<Note class="mb-2">"Type something below to trigger the watch"</Note>
<input
node_ref=input
class="block"
@ -42,8 +43,12 @@ fn Demo() -> impl IntoView {
type="text"
/>
<p>"Value: " {source}</p>
<button prop:disabled=move || !is_active.get() class="orange" on:click=pause>"Pause"</button>
<button prop:disabled=move || is_active.get() on:click=resume>"Resume"</button>
<button prop:disabled=move || !is_active.get() class="orange" on:click=pause>
"Pause"
</button>
<button prop:disabled=move || is_active.get() on:click=resume>
"Resume"
</button>
<button on:click=clear>"Clear Log"</button>
<br/>
<br/>

3
examples/watch_throttled/src/main.rs
View file

@ -15,7 +15,8 @@ fn Demo() -> impl IntoView {
1000.0,
);
view! { <input
view! {
<input
class="block"
prop:value=move || input.get()
on:input=move |e| set_input.set(event_target_value(&e))