mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-12 21:49:49 -04:00
feat: Scrollbar adds content_class and content_style prop
This commit is contained in:
parent
61e3862a1d
commit
a1a301a765
2 changed files with 18 additions and 1 deletions
|
@ -28,5 +28,7 @@ view! {
|
|||
| --- | --- | --- | --- |
|
||||
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the scrollbar element. |
|
||||
| style | `Option<MaybeSignal<String>>` | `Default::default()` | Scrollbar's style. |
|
||||
| content_class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the layout element. |
|
||||
| content_style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Style of scrollable content node. |
|
||||
| size | `u8` | `8` | Size of scrollbar. |
|
||||
| children | `Children` | | Scrollbar's content. |
|
||||
|
|
|
@ -10,6 +10,8 @@ use thaw_utils::{class_list, mount_style, OptionalProp};
|
|||
pub fn Scrollbar(
|
||||
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
|
||||
#[prop(optional, into)] style: Option<MaybeSignal<String>>,
|
||||
#[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
|
||||
#[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
|
||||
#[prop(default = 8)] size: u8,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
|
@ -54,6 +56,9 @@ pub fn Scrollbar(
|
|||
if content_width <= 0.0 {
|
||||
return 0.0;
|
||||
}
|
||||
if content_width <= container_width {
|
||||
return 0.0;
|
||||
}
|
||||
x_track_width * container_width / content_width
|
||||
});
|
||||
let x_thumb_left = Memo::new(move |_| {
|
||||
|
@ -83,6 +88,10 @@ pub fn Scrollbar(
|
|||
if content_height <= 0.0 {
|
||||
return 0.0;
|
||||
}
|
||||
if content_height <= container_height {
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
y_track_height * container_height / content_height
|
||||
});
|
||||
let y_thumb_top = Memo::new(move |_| {
|
||||
|
@ -271,7 +280,13 @@ pub fn Scrollbar(
|
|||
>
|
||||
|
||||
<div class="thaw-scrollbar__container" ref=container_ref on:scroll=on_scroll>
|
||||
<div class="thaw-scrollbar__content" style="width: fit-content;" ref=content_ref>{children()}</div>
|
||||
<div
|
||||
class=class_list!["thaw-scrollbar__content", content_class.map(|c| move || c.get())]
|
||||
style=move || format!("width: fit-content; {}", content_style.as_ref().map_or(String::new(), |s| s.get()))
|
||||
ref=content_ref
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="thaw-scrollbar__track--vertical" ref=y_track_ref>
|
||||
<div
|
||||
|
|
Loading…
Add table
Reference in a new issue