Stepper Vue Component

Stepper Vue component represents Stepper component.

Stepper Components

There are following components included:

Stepper Properties

PropTypeDefaultDescription
<f7-stepper> properties
initbooleantrueInitializes Stepper
valuenumber0Stepper value
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Minimal step between values
wrapsbooleanfalseWhen enabled, incrementing beyond maximum value sets value to minimum value; likewise, decrementing below minimum value sets value to maximum value
autorepeatbooleanfalseWhen enabled it will repeatedly increase/decrease values while you tap and hold plus/minus buttons
autorepeat-dynamicbooleanfalseWhen enabled it will increase autorepeat ratio based on how long you hold the button
inputbooleantrueDefines should it render <input> element or not
input-readonlybooleanfalseMakes inner input element readonly
namestringInput element "name" attribute
buttons-onlybooleanfalseDisables inner value container between stepper buttons
format-valuefunction(value)Custom function to format value for value element between buttons. It must return new formatted value
manual-input-modebooleanfalseEnables manual input mode. This mode allows to type value from keyboard and check fractional part with defined accurancy. Also, step parameter is ignored when typing in this mode.
decimal-pointnumber4Number of digits after dot, when in manual input mode.
buttons-end-input-modebooleantrueDisables manual input mode on Stepper's minus or plus button click.
disabledbooleanfalseDefines whether the stepper is disabled or not
roundbooleanfalseMakes stepper round
round-iosbooleanfalseMakes stepper round for iOS theme only
round-mdbooleanfalseMakes stepper round for MD theme only
largebooleanfalseMakes large stepper
large-iosbooleanfalseMakes large stepper for iOS theme only
large-mdbooleanfalseMakes large stepper for MD theme only
smallbooleanfalseMakes small stepper
small-iosbooleanfalseMakes small stepper for iOS theme only
small-mdbooleanfalseMakes small stepper for MD theme only
fillbooleanfalseMakes stepper filled color
fill-iosbooleanfalseMakes stepper filled color for iOS theme only
fill-mdbooleanfalseMakes stepper filled color for MD theme only
raisedbooleanfalseMakes stepper raised.
raised-iosbooleanfalseMakes stepper raised for iOS theme.
raised-mdbooleanfalseMakes stepper raised for MD theme.

Stepper Events

EventDescription
<f7-stepper> events
stepper:changeEvent will be triggered when Stepper value has been changed
stepper:minusclickEvent will be triggered on "minus" button click
stepper:plusclickEvent will be triggered on "plus" button click
inputEvent will be triggered on input's input event

Stepper Methods

<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

Stepper v-model

f7-stepper component supports v-model on value prop:

<template>
  <p>Value is {{ count }}</p>
  ...
  <f7-stepper
    v-model:value="count"
  />
  ...
</template>
<script>
  export default {
    data() {
      count: 1,
    },
    ...
  };
</script>

Examples

stepper.vue
<template>
  <f7-page>
    <f7-navbar title="Stepper"></f7-navbar>
    <f7-block-title>Shape and size</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper large round fill />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Raised</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper raised />
        </div>
        <div>
          <small class="display-block">Round</small>
          <f7-stepper raised round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Fill</small>
          <f7-stepper raised fill />
        </div>
        <div>
          <small class="display-block">Round Fill</small>
          <f7-stepper raised fill round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small</small>
          <f7-stepper raised small />
        </div>
        <div>
          <small class="display-block">Small Round</small>
          <f7-stepper raised small round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Small Fill</small>
          <f7-stepper raised small fill />
        </div>
        <div>
          <small class="display-block">Small Round Fill</small>
          <f7-stepper raised small round fill />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large</small>
          <f7-stepper raised large />
        </div>
        <div>
          <small class="display-block">Large Round</small>
          <f7-stepper raised large round />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <small class="display-block">Large Fill</small>
          <f7-stepper raised large fill />
        </div>
        <div>
          <small class="display-block">Large Round Fill</small>
          <f7-stepper raised large round fill />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Colors</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill color="red" />
        </div>
        <div>
          <f7-stepper fill round color="green" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill color="blue" />
        </div>
        <div>
          <f7-stepper fill round color="pink" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="yellow" />
        </div>
        <div>
          <f7-stepper fill small round color="orange" />
        </div>
      </div>

      <div class="grid grid-cols-2 grid-gap margin-top">
        <div>
          <f7-stepper fill small color="gray" />
        </div>
        <div>
          <f7-stepper fill small round color="black" />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Without input element</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper :input="false" />
        </div>
        <div>
          <f7-stepper :input="false" round />
        </div>
      </div>
    </f7-block>
    <f7-block-title>Min, max, step</f7-block-title>
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <f7-stepper fill :value="100" :min="0" :max="1000" :step="100" />
        </div>
        <div>
          <f7-stepper fill :input="false" :value="5" :min="0" :max="10" :step="0.5" />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Autorepeat (Tap & hold)</f7-block-title>
    <f7-block-header
      >Pressing and holding one of its buttons increments or decrements the stepper’s value
      repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues
      pressing the control.</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <div class="grid grid-cols-2 grid-gap">
        <div>
          <small class="display-block">Default</small>
          <f7-stepper fill :value="0" :min="0" :max="100" :step="1" :autorepeat="true" />
        </div>
        <div>
          <small class="display-block">Dynamic</small>
          <f7-stepper
            fill
            :value="0"
            :min="0"
            :max="100"
            :step="1"
            :autorepeat="true"
            :autorepeat-dynamic="true"
          />
        </div>
      </div>
    </f7-block>

    <f7-block-title>Wraps</f7-block-title>
    <f7-block-header
      >In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
      decrementing below minimum value sets value to maximum value</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <f7-stepper fill :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true" />
    </f7-block>

    <f7-block-title>Custom value element</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item :title="`Apples ${applesCount}`">
        <template #after>
          <f7-stepper :buttons-only="true" small raised @stepper:change="setApples" />
        </template>
      </f7-list-item>
      <f7-list-item :title="`Oranges ${orangesCount}`">
        <template #after>
          <f7-stepper :buttons-only="true" small raised @stepper:change="setOranges" />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Custom value format</f7-block-title>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item header="Meeting starts in" :title="meetingTimeComputed">
        <template #after>
          <f7-stepper
            :min="15"
            :max="240"
            :step="15"
            :value="meetingTime"
            :buttons-only="true"
            small
            fill
            raised
            @stepper:change="setMeetingTime"
          />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Manual input</f7-block-title>
    <f7-block-header
      >It is possible to enter value manually from keyboard or mobile keypad. When click on input
      field, stepper enter into manual input mode, which allow type value from keyboar and check
      fractional part with defined accurancy. Click outside or enter Return key, ending manual
      mode.</f7-block-header
    >
    <f7-block strong outline-ios class="text-align-center">
      <f7-stepper
        fill
        :value="0"
        :min="0"
        :max="1000"
        :step="1"
        :autorepeat="true"
        :wraps="true"
        :manual-input-mode="true"
        :decimal-point="2"
      />
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7BlockTitle,
  f7Block,
  f7BlockHeader,
  f7List,
  f7ListItem,
  f7Stepper,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7BlockHeader,
    f7List,
    f7ListItem,
    f7Stepper,
  },
  data() {
    return {
      applesCount: 0,
      orangesCount: 0,
      meetingTime: 15,
    };
  },
  computed: {
    meetingTimeComputed() {
      const self = this;
      const value = self.meetingTime;

      const hours = Math.floor(value / 60);
      const minutes = value - hours * 60;
      const formatted = [];
      if (hours > 0) {
        formatted.push(`${hours} ${hours > 1 ? 'hours' : 'hour'}`);
      }
      if (minutes > 0) {
        formatted.push(`${minutes} minutes`);
      }
      return formatted.join(' ');
    },
  },
  methods: {
    setApples(value) {
      this.applesCount = value;
    },
    setOranges(value) {
      this.orangesCount = value;
    },
    setMeetingTime(value) {
      this.meetingTime = value;
    },
  },
};
</script>