@kit-ng-ui/steps

Sequenced step indicator with horizontal/vertical layouts, navigation/inline/default types, dot mode, and per-step status.

Install

pnpm add @kit-ng-ui/steps

@use '@kit-ng-ui/steps/styles' as steps;

Usage

<kit-steps [(current)]="step" [items]="items"></kit-steps>

items: KitStepItem[] = [
  { title: 'Login', description: 'Account credentials' },
  { title: 'Verify', subTitle: '2FA' },
  { title: 'Done' },
];

API

<kit-steps>

| Input | Type | Default | Description | | ------------- | --------------------------------------------- | -------------- | ------------------------------------------------- | | items | ReadonlyArray<KitStepItem> | [] | Step list. | | current | number (two-way) | 0 | Zero-based index of the active step. | | direction | 'horizontal' \| 'vertical' | 'horizontal' | Layout orientation. | | size | 'default' \| 'small' | 'default' | Compact mode. | | type | 'default' \| 'navigation' \| 'inline' | 'default' | Visual style. navigation is implicitly clickable. | | progressDot | boolean | false | Replace the index number with a filled dot. | | clickable | boolean | false | Make completed steps interactive. | | status | 'wait' \| 'process' \| 'finish' \| 'error' | null | Override the current step's status. | | initial | number | 0 | Offset for the displayed step number. |

| Output | Payload | Description | | ------- | -------- | -------------------------------------------- | | change | number | Fires when the user clicks a different step. |

KitStepItem

{ title, description?, subTitle?, status?, disabled?, icon? }