Stepper React Component

    Stepper React component represents Stepper component.

    Stepper Components

    There are following components included:

    • Stepper / F7Stepper

    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 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
    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
    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 keyboar 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
    big boolean false Makes big stepper
    bigIos boolean false Makes big stepper for iOS theme only
    bigMd boolean false Makes big stepper for MD 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
    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
    raised boolean false Makes stepper raised. Affects MD theme only

    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

    Event Description
    <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

    export default class extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          applesCount: 0,
          orangesCount: 0,
          meetingTime: 15,
        };
      }
      get meetingTimeComputed() {
        const self = this;
        const value = self.state.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(' ');
      }
      setApples(value) {
        this.setState({ applesCount: value });
      }
      setOranges(value) {
        this.setState({ orangesCount: value });
      }
      setMeetingTime(value) {
        this.setState({ meetingTime: value });
      }
      render () {
        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></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Round</small>
                  <Stepper round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Fill</small>
                  <Stepper fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Round Fill</small>
                  <Stepper fill round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Small</small>
                  <Stepper small></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Small Round</small>
                  <Stepper small round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Small Fill</small>
                  <Stepper small fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Small Round Fill</small>
                  <Stepper small round fill></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Big</small>
                  <Stepper big></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Big Round</small>
                  <Stepper big round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Big Fill</small>
                  <Stepper big fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Big Round Fill</small>
                  <Stepper big round fill></Stepper>
                </Col>
              </Row>
            </Block>
    
            <BlockTitle>Raised (MD-theme only)</BlockTitle>
            <Block strong className="text-align-center">
              <Row>
                <Col>
                  <small className="display-block">Default</small>
                  <Stepper raised></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Round</small>
                  <Stepper raised round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Fill</small>
                  <Stepper raised fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Round Fill</small>
                  <Stepper raised fill round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Small</small>
                  <Stepper raised small></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Small Round</small>
                  <Stepper raised small round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Small Fill</small>
                  <Stepper raised small fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Small Round Fill</small>
                  <Stepper raised small round fill></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Big</small>
                  <Stepper raised big></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Big Round</small>
                  <Stepper raised big round></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <small className="display-block">Big Fill</small>
                  <Stepper raised big fill></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Big Round Fill</small>
                  <Stepper raised big round fill></Stepper>
                </Col>
              </Row>
            </Block>
            <BlockTitle>Colors</BlockTitle>
            <Block strong className="text-align-center">
              <Row>
                <Col>
                  <Stepper fill color="red"></Stepper>
                </Col>
                <Col>
                  <Stepper fill round color="green"></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <Stepper fill color="blue"></Stepper>
                </Col>
                <Col>
                  <Stepper fill round color="pink"></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <Stepper fill small color="yellow"></Stepper>
                </Col>
                <Col>
                  <Stepper fill small round color="orange"></Stepper>
                </Col>
              </Row>
    
              <Row className="margin-top">
                <Col>
                  <Stepper fill small color="gray"></Stepper>
                </Col>
                <Col>
                  <Stepper fill small round color="black"></Stepper>
                </Col>
              </Row>
            </Block>
            <BlockTitle>Without input element</BlockTitle>
            <Block strong className="text-align-center">
              <Row>
                <Col>
                  <Stepper input={false}></Stepper>
                </Col>
                <Col>
                  <Stepper input={false} round></Stepper>
                </Col>
              </Row>
            </Block>
            <BlockTitle>Min, max, step</BlockTitle>
            <Block strong className="text-align-center">
              <Row>
                <Col>
                  <Stepper value={100} min={0} max={1000} step={100}></Stepper>
                </Col>
                <Col>
                  <Stepper input={false} value={5} min={0} max={10} step={0.5}></Stepper>
                </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 value={0} min={0} max={100} step={1} autorepeat={true}></Stepper>
                </Col>
                <Col>
                  <small className="display-block">Dynamic</small>
                  <Stepper value={0} min={0} max={100} step={1} autorepeat={true} autorepeatDynamic={true}></Stepper>
                </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 value={0} min={0} max={10} step={1} autorepeat={true} wraps={true}></Stepper>
                </Col>
              </Row>
            </Block>
    
            <BlockTitle>Custom value element</BlockTitle>
            <List>
              <ListItem title={`Apples ${this.state.applesCount}`}>
                <Stepper buttonsOnly={true} small raised slot="after" onStepperChange={this.setApples.bind(this)}></Stepper>
              </ListItem>
              <ListItem title={`Oranges ${this.state.orangesCount}`}>
                <Stepper buttonsOnly={true} small raised slot="after" onStepperChange={this.setOranges.bind(this)}></Stepper>
              </ListItem>
            </List>
    
            <BlockTitle>Custom value format</BlockTitle>
            <List>
              <ListItem header="Meeting starts in" title={this.meetingTimeComputed}>
                <Stepper
                  min={15}
                  max={240}
                  step={15}
                  value={this.state.meetingTime}
                  buttonsOnly={true}
                  small
                  slot="after"
                  onStepperChange={this.setMeetingTime.bind(this)}
                ></Stepper>
              </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}></Stepper>
                </Col>
              </Row>
            </Block>
          </Page>
        );
      }
    }