@synerise/ds-stepper NPM | npm.io

1.0.10 • Published 23 days ago

Install

Weekly downloads

76

License

ISC

Repository

Last release

23 days ago

id: stepper

title: Stepper

Stepper UI Component

Installation

npm i @synerise/ds-stepper
or
yarn add @synerise/ds-stepper

Usage

import Stepper from '@synerise/ds-stepper'

<Stepper orientation="vertical">
    <Stepper.Step stepNumber="1" label="Define">
        <Radio.Group>
            <Radio name="radio" value="radio" description="Description">
              Radio
            </Radio>
            <Radio name="radio" value="tv" description="Description">
              TV
            </Radio>
        </Radio.Group>
    </Stepper.Step>
</Stepper>

Demo

API

Stepper

Property	Description	Type	Default
orientation	Defines direction of Stepper steps	`horizontal` \ `vertical`	`horizontal`

Stepper.Step

Property	Description	Type	Default
active	Whether current step is active	`boolean`	`false`
done	Whether step was completed	`boolean`	`false`
label	Label of step	`string` \ `React.ReactNode`	-
onClick	Function called when user clicks on step	`() => void`	-
stepNumber	Step number	`number`	-
tooltip	Shows icon with tooltip if step is active	`string` \ `React.ReactNode`	-
validated	Whether step has some errors	`boolean`	`false`
warning	Whether step has warning status	`boolean`	-

'Acive', 'done', 'validated', 'warning' are properties that determinate what color will have internal wrappers. Please note that it might overwrite some css properties. Properties hierarchy: 'validated' < 'warning' < 'done' < 'active'

@synerise/ds-icon @synerise/ds-tooltip @synerise/ds-utils react-animate-height

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn @synerise/design-system

3 months ago

3 months ago

3 months ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

23 days ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

4 months ago

4 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

11 months ago

10 months ago

11 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

11 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago