fix: NavBar click

This commit is contained in:
luoxiao 2023-10-09 20:56:30 +08:00
parent 81a3c36886
commit bfec51713c
3 changed files with 18 additions and 14 deletions

View file

@ -12,22 +12,23 @@ pub fn NavBar(
) -> impl IntoView {
mount_style("nav-bar", include_str!("./nav-bar.css"));
let on_click_left = move |ev| {
if let Some(click_left) = click_left {
let on_click_left = SignalSetter::map(move |ev| {
if let Some(click_left) = click_left.as_ref() {
click_left.call(ev);
}
};
let on_click_right = move |ev| {
if let Some(click_right) = click_right {
});
let on_click_right = SignalSetter::map(move |ev| {
if let Some(click_right) = click_right.as_ref() {
click_right.call(ev);
}
};
});
view! {
<div class="melt-nav-bar">
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__left" on:click=on_click_left>
<div class="melt-nav-bar__left" on:click=move |ev| on_click_left.set(ev)>
<If cond=left_arrow>
<Then slot>
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
@ -40,7 +41,7 @@ pub fn NavBar(
<div class="melt-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__right" on:click=on_click_right>
<div class="melt-nav-bar__right" on:click=move |ev| on_click_right.set(ev)>
{right_text.get()}
</div>
</Then>

View file

@ -78,8 +78,9 @@ pub fn Slider(
class="melt-slider-handle"
style=move || {
format!(
"left: {}%; transform: translateX(-{}%)", percentage.get(), percentage
.get(),
"left: {}%; transform: translateX(-{}%)",
percentage.get(),
percentage.get(),
)
}
>

View file

@ -42,10 +42,12 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
children=move |options| {
let label_ref = create_node_ref::<html::Span>();
create_effect(move |_| {
let Some(label) = label_ref.get() else { return;
};
let Some(label_list) = label_list_ref.get() else { return;
};
let Some(label) = label_ref.get() else {
return;
};
let Some(label_list) = label_list_ref.get() else {
return;
};
if options.key == active_key.get() {
request_animation_frame(move || {
let list_rect = label_list.get_bounding_client_rect();