leptos-use/examples/use_active_element/src/main.rs

44 lines
1.1 KiB
Rust
Raw Normal View History

2023-06-17 14:05:17 +01:00
use leptos::*;
use leptos_use::docs::{demo_or_body, Note};
use leptos_use::use_active_element;
#[component]
2023-07-27 18:06:36 +01:00
fn Demo() -> impl IntoView {
let active_element = use_active_element();
2023-06-17 14:05:17 +01:00
let key = move || {
format!(
"{:?}",
2023-07-27 18:06:36 +01:00
active_element
.get()
2023-06-17 14:05:17 +01:00
.map(|el| el.dataset().get("id"))
.unwrap_or_default()
)
};
2023-07-27 19:48:21 +01:00
view! {
<Note class="mb-3">"Select the inputs below to see the changes"</Note>
2023-06-17 14:05:17 +01:00
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<For
each=move || (1..7)
key=|i| *i
2023-07-27 19:48:21 +01:00
view=move |i| {
view! { <input type="text" data-id=i class="!my-0 !min-w-0" placeholder=i/> }
2023-06-17 14:05:17 +01:00
}
/>
</div>
2023-07-27 19:48:21 +01:00
<div class="mt-2">"Current Active Element: " <span class="text-primary">{key}</span></div>
2023-06-17 14:05:17 +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 14:05:17 +01:00
})
}