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

✨ feat: add wave component

Browse source
This commit is contained in:
luoxiao 2023-04-27 13:22:34 +08:00
parent 50e5285fe1
commit b71aab36b4
3 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib.rs
View file

@ -10,6 +10,7 @@ mod table;
mod teleport;
mod theme;
mod utils;
mod wave;
pub use button::*;
pub use checkbox::*;
@ -20,3 +21,4 @@ pub use slider::*;
pub use space::*;
pub use table::*;
pub use theme::Theme;
pub use wave::*;

30
src/wave/mod.rs Normal file
View file

@ -0,0 +1,30 @@
use crate::utils::mount_style::mount_style;
use leptos::*;
use stylers::style_sheet_str;
#[component]
pub fn Wave(cx: Scope, children: Children) -> impl IntoView {
let class_name = mount_style("wave", || style_sheet_str!("./src/wave/wave.css"));
let (css_vars, set_css_vars) = create_signal(cx, String::new());
let wave_ref = create_node_ref::<html::Div>(cx);
wave_ref.on_load(cx, move |wave| {
wave.on(ev::mousedown, move |ev| {
wave_ref.on_load(cx, move |wave| {
let rect = wave.get_bounding_client_rect();
let client_x = f64::from(ev.client_x());
let client_y = f64::from(ev.client_y());
set_css_vars.set(format!(
"--x: {}px; --y: {}px",
client_x - rect.left(),
client_y - rect.top()
));
})
});
});
view! {
cx, class=class_name,
<div class="melt-wave" ref=wave_ref style=move || css_vars.get()>
{ children(cx) }
</div>
}
}

38
src/wave/wave.css Normal file
View file

@ -0,0 +1,38 @@
.melt-wave {
position: relative;
}
.melt-wave::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 0.2s;
background: #fff;
opacity: 0;
}
.melt-wave:active::before {
opacity: 0.2;
}
.melt-wave::after {
content: "";
display: block;
position: absolute;
width: 200%;
height: 100%;
left: var(--x, 0);
top: var(--y, 0);
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: translate(-50%, -50%) scale(10);
opacity: 0;
transition: transform 0.8s, opacity 0.8s;
}
.melt-wave:active::after {
transform: translate(-50%, -50%) scale(0);
opacity: 0.3;
transition: 0s;
}