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

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! {
<Space vertical=true>
<SpinButton value step_page=1/>
<SpinButton value=value_f64 step_page=1.0/>
<SpinButton value=value_f64 step_page=1.2/>
</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 decrement_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get());
let increment_disabled = Memo::new(move |_| disabled.get() || value.get() >= max.get());
let decrement_disabled = Memo::new(move |_| disabled.get() || value.get() <= min.get());
view! {
<span
class="thaw-spin-button"
class=("thaw-spin-button--disabled", move || disabled.get())
>
<input
autocomplete="off"
@ -79,6 +80,7 @@ where
type="button"
class="thaw-spin-button__increment-button"
class=("thaw-spin-button__increment-button--disabled", move || increment_disabled.get())
disabled=move || disabled.get()
on:click=move |_| {
if !increment_disabled.get_untracked() {
update_value(value.get_untracked() + step_page.get_untracked());
@ -94,6 +96,7 @@ where
aria-label="Decrement value"
type="button"
class="thaw-spin-button__decrement-button"
disabled=move || disabled.get()
class=("thaw-spin-button__decrement-button--disabled", move || decrement_disabled.get())
on:click=move |_| {
if !decrement_disabled.get_untracked() {

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

@ -73,6 +73,12 @@
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__decrement-button {
display: inline-flex;
@ -121,3 +127,27 @@
grid-row-start: 2;
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;
}