SponsorsBecome a sponsor
- Get Started
- Vue Components
- App
- Accordion
- Action Sheet / Actions
- Appbar
- Area Chart
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Button
- List Index
- List Item
- Login Screen
- Menu
- Menu List
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Skeleton
- Smart Select
- Sortable
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Toggle
- Toolbar / Tabbar
- Treeview
- View
- Virtual List
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 | Minimal step between values |
| 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 | false | Makes inner input element readonly |
| name | string | Input element "name" attribute | |
| 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 | |
| manual-input-mode | boolean | false | Enables 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-point | number | 4 | Number of digits after dot, when in manual input mode. |
| buttons-end-input-mode | boolean | true | Disables manual input mode on Stepper's minus or plus button click. |
| 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 |
| large | boolean | false | Makes large stepper |
| large-ios | boolean | false | Makes large stepper for iOS theme only |
| large-md | boolean | false | Makes large 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. |
| raised-ios | boolean | false | Makes stepper raised for iOS theme. |
| raised-md | boolean | false | Makes stepper raised for MD theme. |
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
| <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
<template>
<f7-page>
<f7-navbar title="Stepper"></f7-navbar>
<f7-block-title>Shape and size</f7-block-title>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<small class="display-block">Default</small>
<f7-stepper></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Round</small>
<f7-stepper round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Fill</small>
<f7-stepper fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Round Fill</small>
<f7-stepper fill round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Small</small>
<f7-stepper small></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Small Round</small>
<f7-stepper small round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Small Fill</small>
<f7-stepper small fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Small Round Fill</small>
<f7-stepper small round fill></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Large</small>
<f7-stepper large></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Large Round</small>
<f7-stepper large round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Large Fill</small>
<f7-stepper large fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Large Round Fill</small>
<f7-stepper large round fill></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Raised</f7-block-title>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<small class="display-block">Default</small>
<f7-stepper raised></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Round</small>
<f7-stepper raised round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Fill</small>
<f7-stepper raised fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Round Fill</small>
<f7-stepper raised fill round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Small</small>
<f7-stepper raised small></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Small Round</small>
<f7-stepper raised small round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Small Fill</small>
<f7-stepper raised small fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Small Round Fill</small>
<f7-stepper raised small round fill></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Large</small>
<f7-stepper raised large></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Large Round</small>
<f7-stepper raised large round></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<small class="display-block">Large Fill</small>
<f7-stepper raised large fill></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Large Round Fill</small>
<f7-stepper raised large round fill></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Colors</f7-block-title>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<f7-stepper fill color="red"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper fill round color="green"></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<f7-stepper fill color="blue"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper fill round color="pink"></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<f7-stepper fill small color="yellow"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper fill small round color="orange"></f7-stepper>
</f7-col>
</f7-row>
<f7-row class="margin-top">
<f7-col>
<f7-stepper fill small color="gray"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper fill small round color="black"></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Without input element</f7-block-title>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<f7-stepper :input="false"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper :input="false" round></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Min, max, step</f7-block-title>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<f7-stepper :value="100" :min="0" :max="1000" :step="100"></f7-stepper>
</f7-col>
<f7-col>
<f7-stepper :input="false" :value="5" :min="0" :max="10" :step="0.5"></f7-stepper>
</f7-col>
</f7-row>
</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 class="text-align-center">
<f7-row>
<f7-col>
<small class="display-block">Default</small>
<f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true"></f7-stepper>
</f7-col>
<f7-col>
<small class="display-block">Dynamic</small>
<f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true" :autorepeat-dynamic="true"></f7-stepper>
</f7-col>
</f7-row>
</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 class="text-align-center">
<f7-row>
<f7-col>
<f7-stepper :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true"></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Custom value element</f7-block-title>
<f7-list>
<f7-list-item :title="`Apples ${applesCount}`">
<template #after>
<f7-stepper :buttons-only="true" small raised @stepper:change="setApples"></f7-stepper>
</template>
</f7-list-item>
<f7-list-item :title="`Oranges ${orangesCount}`">
<template #after>
<f7-stepper :buttons-only="true" small raised @stepper:change="setOranges"></f7-stepper>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>Custom value format</f7-block-title>
<f7-list>
<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
@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 keyboard and check fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.</f7-block-header>
<f7-block strong class="text-align-center">
<f7-row>
<f7-col>
<f7-stepper fill :value="0" :min="0" :max="1000" :step="1" :autorepeat="true" :wraps="true" :manual-input-mode="true" :decimal-point="2"></f7-stepper>
</f7-col>
</f7-row>
</f7-block>
</f7-page>
</template>
<script>
export default {
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>