@synerise/ds-stepper NPM | npm.io

1.0.10 • Published 5 months ago

Install

Weekly downloads

76

License

ISC

Repository

Last release

5 months 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

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

12 months 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

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

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

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

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

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

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago