Stepper Vue Component

Stepper Vue component represents Stepper component.

Stepper Components

There are following components included:

• f7-stepper

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>