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

Fix/slider label position (#250)

Browse source 
* fix: Slider labels all stacked to the left with Firefox

* perf: Slider focus-within
This commit is contained in:
luoxiaozero 2024-09-05 11:08:36 +08:00 • committed by GitHub
parent add97b0f7b
commit 1ab9dd4c9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
thaw/src/slider/mod.rs
View file

@ -37,7 +37,6 @@ pub fn Slider(
let (id, name) = FieldInjection::use_id_and_name(id, name); let (id, name) = FieldInjection::use_id_and_name(id, name);
let validate = Rule::validate(rules, value, name); let validate = Rule::validate(rules, value, name);
let is_chldren = children.is_some(); let is_chldren = children.is_some();
let list_id = is_chldren.then(|| uuid::Uuid::new_v4().to_string());
let current_value = Memo::new(move |_| { let current_value = Memo::new(move |_| {
let max = max.get(); let max = max.get();
let min = min.get(); let min = min.get();
@ -100,14 +99,13 @@ pub fn Slider(
on:input=on_input on:input=on_input
value=current_value.get_untracked() value=current_value.get_untracked()
prop:value=move || current_value.get() prop:value=move || current_value.get()
list=list_id.clone()
/> />
<div class="thaw-slider__rail"></div> <div class="thaw-slider__rail"></div>
<div class="thaw-slider__thumb"></div> <div class="thaw-slider__thumb"></div>
<OptionComp value=children let:children> <OptionComp value=children let:children>
<datalist id=list_id class="thaw-slider__datalist"> <div class="thaw-slider__datalist">
{children()} {children()}
</datalist> </div>
</OptionComp> </OptionComp>
</div> </div>
</Provider> </Provider>

13
thaw/src/slider/slider.css
View file

@ -33,6 +33,19 @@
outline-style: none; outline-style: none;
} }
.thaw-slider:focus-within::after {
content: "";
position: absolute;
bottom: calc(0px);
left: calc(-10px);
right: calc(-10px);
top: calc(0px);
z-index: 1;
pointer-events: none;
border-radius: var(--borderRadiusMedium);
border: 2px solid var(--colorStrokeFocus2);
}
.thaw-slider__input { .thaw-slider__input {
grid-column-end: -1; grid-column-end: -1;
grid-column-start: 1; grid-column-start: 1;

4
thaw/src/slider/slider_label.rs
View file

@ -20,9 +20,9 @@ pub fn SliderLabel(
}; };
view! { view! {
<option class=class_list!["thaw-slider-label", class] style=style value=move || value.get()> <div class=class_list!["thaw-slider-label", class] style=style>
{children()} {children()}
</option> </div>
} }
} }