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

use_scroll demo cosmetics

Browse source
This commit is contained in:
Maccesch 2023-05-28 17:52:13 +01:00
parent 606632b0e5
commit d0b669e4c8
2 changed files with 52 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/use_scroll/src/main.rs
View file

@ -27,7 +27,7 @@ fn Demo(cx: Scope) -> impl IntoView {
view! { cx,
<div class="flex">
<div node_ref=el class="w-[300px] h-[300px] m-auto overflow-scroll bg-gray-500/5 rounded">
<div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded">
<div class="w-[500px] h-[400px] relative">
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
"top_left"
@ -48,7 +48,7 @@ fn Demo(cx: Scope) -> impl IntoView {
</div>
</div>
<div class="m-auto w-280px pl-4">
<div class="my-10 w-280px pl-4">
<div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5">
<span class="text-right opacity-75 py-4">
"X Position"

50
examples/use_scroll/style/output.css
View file

@ -300,6 +300,56 @@ select {
margin: auto;
}
.m-2 {
margin: 0.5rem;
}
.m-10 {
margin: 2.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.mr-0 {
margin-right: 0px;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-0 {
margin-left: 0px;
}
.flex {
display: flex;
}