Stepper React Component

Stepper Components
Stepper Properties
Stepper Events
Stepper Methods
Examples

Stepper React component represents Stepper component.

Stepper Components

There are following components included:

Stepper

Stepper Properties

Prop	Type	Default	Description
<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
autorepeatDynamic	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
inputReadonly	boolean	false	Makes inner input element `readonly`
name	string		Input element "name" attribute
buttonsOnly	boolean	false	Disables inner value container between stepper buttons
formatValue	function(value)		Custom function to format value for value element between buttons. It must return new formatted value
manualInputMode	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.
decimalPoint	number	4	Number of digits after dot, when in manual input mode.
buttonsEndInputMode	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
roundIos	boolean	false	Makes stepper round for iOS theme only
roundMd	boolean	false	Makes stepper round for MD theme only
roundAurora	boolean	false	Makes stepper round for Aurora theme only
large	boolean	false	Makes large stepper
largeIos	boolean	false	Makes large stepper for iOS theme only
largeMd	boolean	false	Makes large stepper for MD theme only
largeAurora	boolean	false	Makes large stepper for Aurora theme only
small	boolean	false	Makes small stepper
smallIos	boolean	false	Makes small stepper for iOS theme only
smallMd	boolean	false	Makes small stepper for MD theme only
smallAurora	boolean	false	Makes small stepper for Aurora theme only
fill	boolean	false	Makes stepper filled color
fillIos	boolean	false	Makes stepper filled color for iOS theme only
fillMd	boolean	false	Makes stepper filled color for MD theme only
fillAurora	boolean	false	Makes stepper filled color for Aurora theme only
raised	boolean	false	Makes stepper raised.
raisedIos	boolean	false	Makes stepper raised for iOS theme.
raisedMd	boolean	false	Makes stepper raised for MD theme.
raisedAurora	boolean	false	Makes stepper raised for Aurora theme.

Stepper Events

Event	Description
<Stepper> events
stepperChange	Event will be triggered when Stepper value has been changed
stepperMinusClick	Event will be triggered on "minus" button click
stepperPlusClick	Event will be triggered on "plus" button click
input	Event will be triggered on input's `input` event

Stepper Methods

<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

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  Row,
  Col,
  Stepper,
  BlockHeader,
  List,
  ListItem,
} from 'framework7-react';

export default () => {
  const [applesCount, setApplesCount] = useState(0);
  const [orangesCount, setOrangesCount] = useState(0);
  const [meetingTime, setMeetingTime] = useState(15);

  const meetingTimeComputed = () => {
    const value = 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(' ');
  };

  return (
    
      
    <Page>
      <Navbar title="Stepper"></Navbar>
      <BlockTitle>Shape and size</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper />
          </Col>
          <Col>
            <small className="display-block">Round</small>
            <Stepper round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Fill</small>
            <Stepper fill />
          </Col>
          <Col>
            <small className="display-block">Round Fill</small>
            <Stepper fill round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small</small>
            <Stepper small />
          </Col>
          <Col>
            <small className="display-block">Small Round</small>
            <Stepper small round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small Fill</small>
            <Stepper small fill />
          </Col>
          <Col>
            <small className="display-block">Small Round Fill</small>
            <Stepper small round fill />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large</small>
            <Stepper large />
          </Col>
          <Col>
            <small className="display-block">Large Round</small>
            <Stepper large round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large Fill</small>
            <Stepper large fill />
          </Col>
          <Col>
            <small className="display-block">Large Round Fill</small>
            <Stepper large round fill />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Raised</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper raised />
          </Col>
          <Col>
            <small className="display-block">Round</small>
            <Stepper raised round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Fill</small>
            <Stepper raised fill />
          </Col>
          <Col>
            <small className="display-block">Round Fill</small>
            <Stepper raised fill round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small</small>
            <Stepper raised small />
          </Col>
          <Col>
            <small className="display-block">Small Round</small>
            <Stepper raised small round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Small Fill</small>
            <Stepper raised small fill />
          </Col>
          <Col>
            <small className="display-block">Small Round Fill</small>
            <Stepper raised small round fill />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large</small>
            <Stepper raised large />
          </Col>
          <Col>
            <small className="display-block">Large Round</small>
            <Stepper raised large round />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <small className="display-block">Large Fill</small>
            <Stepper raised large fill />
          </Col>
          <Col>
            <small className="display-block">Large Round Fill</small>
            <Stepper raised large round fill />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Colors</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper fill color="red" />
          </Col>
          <Col>
            <Stepper fill round color="green" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill color="blue" />
          </Col>
          <Col>
            <Stepper fill round color="pink" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill small color="yellow" />
          </Col>
          <Col>
            <Stepper fill small round color="orange" />
          </Col>
        </Row>

        <Row className="margin-top">
          <Col>
            <Stepper fill small color="gray" />
          </Col>
          <Col>
            <Stepper fill small round color="black" />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Without input element</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper input={false} />
          </Col>
          <Col>
            <Stepper input={false} round />
          </Col>
        </Row>
      </Block>
      <BlockTitle>Min, max, step</BlockTitle>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper fill value={100} min={0} max={1000} step={100} />
          </Col>
          <Col>
            <Stepper fill input={false} value={5} min={0} max={10} step={0.5} />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Autorepeat (Tap & hold)</BlockTitle>
      <BlockHeader>
        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.
      </BlockHeader>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <small className="display-block">Default</small>
            <Stepper fill value={0} min={0} max={100} step={1} autorepeat={true} />
          </Col>
          <Col>
            <small className="display-block">Dynamic</small>
            <Stepper
              fill
              value={0}
              min={0}
              max={100}
              step={1}
              autorepeat={true}
              autorepeatDynamic={true}
            />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Wraps</BlockTitle>
      <BlockHeader>
        In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
        decrementing below minimum value sets value to maximum value
      </BlockHeader>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper fill value={0} min={0} max={10} step={1} autorepeat={true} wraps={true} />
          </Col>
        </Row>
      </Block>

      <BlockTitle>Custom value element</BlockTitle>
      <List>
        <ListItem title={`Apples ${applesCount}`}>
          <Stepper
            buttonsOnly={true}
            small
            raised
            slot="after"
            onStepperChange={setApplesCount}
          />
        </ListItem>
        <ListItem title={`Oranges ${orangesCount}`}>
          <Stepper
            buttonsOnly={true}
            small
            raised
            slot="after"
            onStepperChange={setOrangesCount}
          />
        </ListItem>
      </List>

      <BlockTitle>Custom value format</BlockTitle>
      <List>
        <ListItem header="Meeting starts in" title={meetingTimeComputed()}>
          <Stepper
            min={15}
            max={240}
            step={15}
            value={meetingTime}
            buttonsOnly={true}
            small
            fill
            raised
            slot="after"
            onStepperChange={setMeetingTime}
          />
        </ListItem>
      </List>

      <BlockTitle>Manual input</BlockTitle>
      <BlockHeader>
        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.
      </BlockHeader>
      <Block strong className="text-align-center">
        <Row>
          <Col>
            <Stepper
              fill
              value={0}
              min={0}
              max={1000}
              step={1}
              autorepeat={true}
              wraps={true}
              manualInputMode={true}
              decimalPoint={2}
            />
          </Col>
        </Row>
      </Block>
    </Page>
      
    
  );
};