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

feat: SpinButton disabled

Browse source
This commit is contained in:
luoxiao 2024-05-22 23:17:27 +08:00
parent 7d99f9bd09
commit 97263ec80d
3 changed files with 56 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
demo_markdown/docs/spin_button/mod.md
View file

@ -7,7 +7,27 @@ let value_f64 = RwSignal::new(0.0);
view! { view! {
<Space vertical=true> <Space vertical=true>
<SpinButton value step_page=1/> <SpinButton value step_page=1/>
<SpinButton value=value_f64 step_page=1.0/> <SpinButton value=value_f64 step_page=1.2/>
</Space> </Space>
} }
``` ```
### Min / Max
```rust demo
let value = RwSignal::new(0);
view! {
<SpinButton value step_page=1 min=-1 max=2/>
}
```
### Disabled
```rust demo
let value = RwSignal::new(0);
view! {
<SpinButton value step_page=1 disabled=true/>
}
```

7
thaw/src/spin_button/mod.rs
View file

@ -48,12 +48,13 @@ where
} }
}; };
let increment_disabled = Memo::new(move |_| disabled.get() || value.get() <= min.get()); let increment_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get());
let decrement_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get()); let decrement_disabled = Memo::new(move |_| disabled.get() || value.get() <= min.get());
view! { view! {
<span <span
class="thaw-spin-button" class="thaw-spin-button"
class=("thaw-spin-button--disabled", move || disabled.get())
> >
<input <input
autocomplete="off" autocomplete="off"
@ -79,6 +80,7 @@ where
type="button" type="button"
class="thaw-spin-button__increment-button" class="thaw-spin-button__increment-button"
class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get()) class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get())
disabled=move || disabled.get()
on:click=move |_| { on:click=move |_| {
if !increment_disabled.get_untracked() { if !increment_disabled.get_untracked() {
update_value(value.get_untracked() + step_page.get_untracked()); update_value(value.get_untracked() + step_page.get_untracked());
@ -94,6 +96,7 @@ where
aria-label="Decrement value" aria-label="Decrement value"
type="button" type="button"
class="thaw-spin-button__decrement-button" class="thaw-spin-button__decrement-button"
disabled=move || disabled.get()
class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get()) class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get())
on:click=move |_| { on:click=move |_| {
if !decrement_disabled.get_untracked() { if !decrement_disabled.get_untracked() {

30
thaw/src/spin_button/spin-button.css
View file

@ -73,6 +73,12 @@
width: 100%; width: 100%;
} }
.thaw-spin-button__input:disabled {
color: var(--colorNeutralForegroundDisabled);
background-color: var(--colorTransparentBackground);
cursor: not-allowed;
}
.thaw-spin-button__increment-button, .thaw-spin-button__increment-button,
.thaw-spin-button__decrement-button { .thaw-spin-button__decrement-button {
display: inline-flex; display: inline-flex;
@ -121,3 +127,27 @@
grid-row-start: 2; grid-row-start: 2;
border-bottom-right-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium);
} }
.thaw-spin-button__increment-button:disabled,
.thaw-spin-button__decrement-button:disabled {
color: var(--colorNeutralForegroundDisabled);
cursor: not-allowed;
}
.thaw-spin-button__increment-button--disabled:enabled:hover,
.thaw-spin-button__decrement-button--disabled:enabled:hover,
.thaw-spin-button__increment-button--disabled:enabled:active,
.thaw-spin-button__decrement-button--disabled:enabled:active {
background-color: transparent;
color: var(--colorNeutralForegroundDisabled);
cursor: not-allowed;
}
.thaw-spin-button--disabled,
.thaw-spin-button--disabled:hover {
background-color: var(--colorTransparentBackground);
border-color: var(--colorNeutralStrokeDisabled);
border-bottom-color: var(--colorNeutralStrokeDisabled);
cursor: not-allowed;
}