adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: change to PopoverTrigger class (#59)

Browse source
This commit is contained in:
luoxiaozero 2023-12-23 13:28:50 +08:00 • committed by GitHub
parent 5ab09bb281
commit 3b63be026e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demo/src/pages/popover/mod.rs
View file

@ -272,16 +272,6 @@ pub fn PopoverPage() -> impl IntoView {
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Addtional classes for the trigger element."</td>
</tr>
<tr>
<td>"content_class"</td>
<td>
<Text code=true>"MaybeSignal<String>"</Text>
</td>
<td>
<Text code=true>"Default::default()"</Text>
</td>
<td>"Content class of the popover."</td>
</tr>
<tr>

13
src/popover/mod.rs
View file

@ -12,13 +12,14 @@ pub use theme::PopoverTheme;
#[slot]
pub struct PopoverTrigger {
#[prop(optional, into)]
class: MaybeSignal<String>,
children: Children,
}
#[component]
pub fn Popover(
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional, into)] content_class: MaybeSignal<String>,
#[prop(optional)] trigger_type: PopoverTriggerType,
popover_trigger: PopoverTrigger,
#[prop(optional)] placement: PopoverPlacement,
@ -106,16 +107,20 @@ pub fn Popover(
is_show_popover.update(|show| *show = !*show);
});
});
let PopoverTrigger {
class: trigger_class,
children: trigger_children,
} = popover_trigger;
view! {
<Binder target_ref>
<div
class=class_list!["thaw-popover-trigger", move || class.get()]
class=class_list!["thaw-popover-trigger", move || trigger_class.get()]
ref=target_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
{(popover_trigger.children)()}
{trigger_children()}
</div>
<Follower slot show=is_show_popover placement>
<div
@ -125,7 +130,7 @@ pub fn Popover(
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
<div class=move || content_class.get()>{children()}</div>
<div class=move || class.get()>{children()}</div>
<div class="thaw-popover__angle-container">
<div class="thaw-popover__angle"></div>
</div>