Import
use maccn::MacStepper;Usage
MacStepper::new("quantity")
.on_increment(|_, _| {
println!("Incremented");
})
.on_decrement(|_, _| {
println!("Decremented");
});With a text field
use gpui::div;
use maccn::{MacStepper, MacTextField};
let entity = cx.entity().downgrade();
div()
.flex()
.items_center()
.gap_2()
.child(MacTextField::new("stepper-field", &state).w(px(60.)))
.child(
MacStepper::new("stepper-paired").on_increment({
let entity = entity.clone();
move |window, cx| {
_ = entity.update(cx, |this, cx| {
this.stepper_value = (this.stepper_value + 1).min(99);
let value = this.stepper_value;
this.stepper_input.update(cx, |state, cx| {
state.set_value(value.to_string(), window, cx);
});
cx.notify();
});
}
}).on_decrement({
let entity = entity.clone();
move |window, cx| {
_ = entity.update(cx, |this, cx| {
this.stepper_value = (this.stepper_value - 1).max(0);
let value = this.stepper_value;
this.stepper_input.update(cx, |state, cx| {
state.set_value(value.to_string(), window, cx);
});
cx.notify();
});
}
}),
)Sizes
use gpui::div;
use maccn::{MacControlSize, MacStepper};
div()
.flex()
.items_center()
.gap_2()
.child(MacStepper::new("stepper-xl").size(MacControlSize::ExtraLarge))
.child(MacStepper::new("stepper-l").size(MacControlSize::Large))
.child(MacStepper::new("stepper-r"))
.child(MacStepper::new("stepper-s").size(MacControlSize::Small))
.child(MacStepper::new("stepper-m").size(MacControlSize::Mini))Disabled
MacStepper::new("stepper-d").disabled(true)API
Props
| Prop | Type | Default |
|---|---|---|
size | MacControlSize | Regular |
disabled | bool | false |
Events
| Event | Payload |
|---|---|
on_increment | (&mut Window, &mut App) |
on_decrement | (&mut Window, &mut App) |