@highlight-ui/progress-tracker NPM | npm.io

3.2.5 • Published 1 year ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 year ago

@highlight-ui/progress-tracker

Using npm:

npm install @highlight-ui/progress-tracker

Using yarn:

yarn add @highlight-ui/progress-tracker

Using pnpm:

pnpm install @highlight-ui/progress-tracker

In your (S)CSS file:

@import url('@highlight-ui/progress-tracker');

Once the package is installed, you can import the library:

import { ProgressTracker } from '@highlight-ui/progress-tracker';

Usage

import React from 'react';
import { ProgressTracker } from '@highlight-ui/progress-tracker';

export default function ProgressTrackerExample() {
  return (
    <ProgressTracker
      stepNames={[
        'First step with a really, really long step name so you can trigger line wrapping ',
        'Second step with not so long a name',
        'Third step',
        'Fourth',
      ]}
      currentStepIndex={1}
    />
  );
}

Props 📜

Prop	Type	Required	Default	Description
`stepNames`	`string[]`	Yes		Specify the unique step names to display
`currentStepIndex`	`number`	Yes		Specify the active step index. This updates the style for active and previous step names
`className`	`string`	No		Allows providing a custom classname

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.

@highlight-ui/icon @highlight-ui/typography @highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 personio-componants @zalastax/nolb-_hig

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

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

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

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

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