Stepper Vue Component
Stepper Vue component represents Stepper component.
Stepper Components
There are following components included:
Stepper Properties
Prop |
Type |
Default |
Description |
<f7-stepper> properties |
init |
boolean |
true |
Initializes Stepper |
value |
number |
0 |
Stepper value |
min |
number |
0 |
Minimum value |
max |
number |
100 |
Maximum value |
step |
number |
1 |
Maximum value |
wraps |
boolean |
false |
When enabled, incrementing beyond maximum value sets value to minimum value; likewise, decrementing below minimum value sets value to maximum value |
autorepeat |
boolean |
false |
When enabled it will repeatedly increase/decrease values while you tap and hold plus/minus buttons |
autorepeat-dynamic |
boolean |
false |
When enabled it will increase autorepeat ratio based on how long you hold the button |
input |
boolean |
true |
Defines should it render <input> element or not |
input-readonly |
boolean |
true |
Makes inner input element readonly |
buttons-only |
boolean |
false |
Disables inner value container between stepper buttons |
format-value |
function(value) |
|
Custom function to format value for value element between buttons. It must return new formatted value |
disabled |
boolean |
false |
Defines whether the stepper is disabled or not |
round |
boolean |
false |
Makes stepper round |
round-ios |
boolean |
false |
Makes stepper round for iOS theme only |
round-md |
boolean |
false |
Makes stepper round for MD theme only |
big |
boolean |
false |
Makes big stepper |
big-ios |
boolean |
false |
Makes big stepper for iOS theme only |
big-md |
boolean |
false |
Makes big stepper for MD theme only |
small |
boolean |
false |
Makes small stepper |
small-ios |
boolean |
false |
Makes small stepper for iOS theme only |
small-md |
boolean |
false |
Makes small stepper for MD theme only |
fill |
boolean |
false |
Makes stepper filled color |
fill-ios |
boolean |
false |
Makes stepper filled color for iOS theme only |
fill-md |
boolean |
false |
Makes stepper filled color for MD theme only |
raised |
boolean |
false |
Makes stepper raised. Affects MD theme only |
Stepper Events
Event |
Description |
<f7-stepper> events |
stepper:change |
Event will be triggered when Stepper value has been changed |
stepper:minusclick |
Event will be triggered on "minus" button click |
stepper:plusclick |
Event will be triggered on "plus" button click |
input |
Event will be triggered on input's input event |
Stepper Methods
Event |
Description |
<f7-stepper> methods |
.increment() |
Increment stepper value, similar to clicking on its "plus" button |
.decremenet() |
Decrement stepper value, similar to clicking on its "minus" button |
.setValue(newValue) |
Set new stepper value |
.getValue() |
Returns stepper value |
Examples
<!-- Default -->
<f7-stepper></f7-stepper>
<!-- Small and round -->
<f7-stepper small round></f7-stepper>
<!-- Min, max, step -->
<f7-stepper
:min="0"
:max="1000"
:step="100"
:value="500"
></f7-stepper>
<!-- With buttons only -->
<f7-stepper
:min="0"
:max="1000"
:step="100"
:value="500"
:buttons-only="true"
></f7-stepper>
<!-- Event -->
<f7-stepper
:min="10"
:max="20"
:step="0.5"
:value="15"
@stepper:change="(value) => { someVar = value }"
></f7-stepper>