Package Exports

essence-stepper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (essence-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Essence Steppers - Stepper component

Options:

steps: default {} empty object, see the example bellow to customize
editable: default true or false
type: default horizontal or vertical
currentStep: initial step 0
onContinue: default callback null
onBack: default callback null
activeColor: default color e-background-indigo-400, use a background color class to change the default active color
inactiveColor: default color e-background-grey-400, use a background color class to change the default inactive color

How to use

import Stepper from 'essence-stepper';

const Steps = {
  'editable': [
    {
      'title': (<Text>Select campaign settings</Text>),
      'content': (<Text className={'e-caption'}>Campaign settings</Text>)
    },
    {
      'title': (<Text>Create an ad group</Text>),
      'optional': (<Text>Optional</Text>),
      'content': (<Text className={'e-caption'}>Ad group</Text>)
    },
    {
      'title': (<Text>Create an ad</Text>),
      'content': (<Text className={'e-caption'}>Ad details</Text>)
    }
  ],
  'non-editable': [
    {
      'title': (<Text>Select campaign settings</Text>),
      'content': (<Text className={'e-caption'}>Campaign settings</Text>)
    },
    {
      'title': (<Text>Create an ad group</Text>),
      'content': (<Text className={'e-caption'}>Ad group</Text>)
    },
    {
      'title': (<Text>Create an ad</Text>),
      'content': (<Text className={'e-caption'}>Ad details</Text>)
    },
    {
      'content': (<Text className={'e-caption'}>Summary</Text>)
    }
  ]
};

<Stepper steps={Steps['editable']} />

<Stepper editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />

<Stepper type={'vertical'} editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />