essence-stepper
v1.0.7
Published
Essence Steppers - Stepper component
Downloads
15
Maintainers
Keywords
Readme
Essence Steppers - Stepper component
Options:
- steps: default
{}
empty object, see the example bellow to customize - editable: default
true
orfalse
- type: default
horizontal
orvertical
- 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)} />