2023-07-03 16:10:58 +01:00
|
|
|
use leptos::html::Button;
|
2024-05-07 12:41:44 +01:00
|
|
|
use leptos::prelude::*;
|
2023-06-17 04:05:51 +01:00
|
|
|
use leptos_use::docs::demo_or_body;
|
|
|
|
use leptos_use::{use_element_hover_with_options, UseElementHoverOptions};
|
|
|
|
|
|
|
|
#[component]
|
2023-07-27 18:06:36 +01:00
|
|
|
fn Demo() -> impl IntoView {
|
|
|
|
let el = create_node_ref::<Button>();
|
2023-06-17 04:05:51 +01:00
|
|
|
|
|
|
|
let is_hovered = use_element_hover_with_options(
|
|
|
|
el,
|
|
|
|
UseElementHoverOptions::default()
|
|
|
|
.delay_enter(200)
|
|
|
|
.delay_leave(600),
|
|
|
|
);
|
|
|
|
|
2023-07-27 19:48:21 +01:00
|
|
|
view! {
|
|
|
|
<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();
|
|
|
|
|
2023-07-27 18:06:36 +01:00
|
|
|
mount_to(demo_or_body(), || {
|
2023-07-27 19:48:21 +01:00
|
|
|
view! { <Demo/> }
|
2023-06-17 04:05:51 +01:00
|
|
|
})
|
|
|
|
}
|