2023-06-17 04:05:51 +01:00
|
|
|
use leptos::*;
|
|
|
|
use leptos_use::docs::demo_or_body;
|
|
|
|
use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
|
|
|
|
|
|
|
|
#[component]
|
|
|
|
fn Demo(cx: Scope) -> impl IntoView {
|
|
|
|
let el = create_node_ref(cx);
|
|
|
|
|
|
|
|
let is_hovered = use_element_hover_with_options(
|
|
|
|
cx,
|
|
|
|
el,
|
|
|
|
UseElementHoverOptions::default()
|
|
|
|
.delay_enter(200)
|
|
|
|
.delay_leave(600),
|
|
|
|
);
|
|
|
|
|
|
|
|
view! { cx,
|
2023-06-21 13:09:00 +02:00
|
|
|
<button node_ref=el>{ move || if is_hovered.get() { "Thank you!" } else { "Hover me" } }</button>
|
2023-06-17 04:05:51 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
_ = console_log::init_with_level(log::Level::Debug);
|
|
|
|
console_error_panic_hook::set_once();
|
|
|
|
|
|
|
|
mount_to(demo_or_body(), |cx| {
|
|
|
|
view! { cx, <Demo /> }
|
|
|
|
})
|
|
|
|
}
|