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

feat: TimePicker scrollbar

Browse source
This commit is contained in:
luoxiao 2024-04-05 23:27:29 +08:00 • committed by luoxiaozero
parent 69ddf6b02f
commit 61e3862a1d
2 changed files with 88 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
thaw/src/time_picker/mod.rs
View file

@ -3,7 +3,8 @@ mod theme;
pub use theme::TimePickerTheme; pub use theme::TimePickerTheme;
use crate::{ use crate::{
use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme, use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, Scrollbar, SignalWatch,
Theme,
}; };
use chrono::{Local, NaiveTime, Timelike}; use chrono::{Local, NaiveTime, Timelike};
use leptos::*; use leptos::*;
@ -187,7 +188,7 @@ fn Panel(
> >
<div class="thaw-time-picker-panel__time"> <div class="thaw-time-picker-panel__time">
<div class="thaw-time-picker-panel__time-hour" ref=hour_ref> <div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
<Scrollbar size=6>
{(0..24) {(0..24)
.map(|hour| { .map(|hour| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
@ -215,10 +216,11 @@ fn Panel(
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
<div class="thaw-time-picker-panel__time-minute" ref=minute_ref> <div class="thaw-time-picker-panel__time-minute" ref=minute_ref>
<Scrollbar size=6>
{(0..60) {(0..60)
.map(|minute| { .map(|minute| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
@ -246,10 +248,11 @@ fn Panel(
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
<div class="thaw-time-picker-panel__time-second" ref=second_ref> <div class="thaw-time-picker-panel__time-second" ref=second_ref>
<Scrollbar size=6>
{(0..60) {(0..60)
.map(|second| { .map(|second| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
@ -277,6 +280,7 @@ fn Panel(
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
</div> </div>

1
thaw/src/time_picker/time-picker.css
View file

@ -17,7 +17,6 @@
.thaw-time-picker-panel__time-minute, .thaw-time-picker-panel__time-minute,
.thaw-time-picker-panel__time-second { .thaw-time-picker-panel__time-second {
flex: 1; flex: 1;
overflow-y: auto;
} }
.thaw-time-picker-panel__time-item { .thaw-time-picker-panel__time-item {