@finastra/stepper
Version:
Stepper Web Component
63 lines (44 loc) • 3.16 kB
Markdown
# fds-horizontal-stepper
## Attributes
| Attribute | Type | Default | Description |
|-------------|-----------|---------|----------------------|
| `secondary` | `boolean` | false | Use Secondary color. |
## Properties
| Property | Attribute | Type | Default | Description |
|--------------------|--------------------|-----------|---------|-------------------------------|
| `currentStepIndex` | `currentStepIndex` | `number` | 0 | Index of current active step. |
| `hideIndex` | `hideIndex` | `boolean` | false | Hide the index of each steps. |
| `readonly` | `readonly` | `boolean` | false | Read only mode. |
| `steps` | | `Step[]` | [] | |
## Methods
| Method | Type |
|---------------------|--------------------------------------------------|
| `renderIcon` | `(step: Step, index: number): number \| TemplateResult<1> \| null` |
| `renderIconAndLine` | `(step: Step, index: number): TemplateResult<1>` |
## CSS Custom Properties
| Property | Type | Default | Description |
|----------------------------|------|---------|---------------------|
| `--fds-stepper-line-space` | text | "8px" | Stepper line space. |
# fds-vertical-stepper
## Attributes
| Attribute | Type | Default | Description |
|--------------------------------------------------|-----------|---------|----------------------|
| `labelMode] - Position of the label relative to the steps. Available values ["none", "center", "background"` | | | |
| `secondary` | `boolean` | false | Use Secondary color. |
## Properties
| Property | Attribute | Type | Default | Description |
|--------------------|--------------------|-----------|---------|-------------------------------|
| `currentStepIndex` | `currentStepIndex` | `number` | 0 | Index of current active step. |
| `hideIndex` | `hideIndex` | `boolean` | false | Hide the index of each steps. |
| `labelMode` | `label-mode` | `string` | "" | |
| `readonly` | `readonly` | `boolean` | false | Read only mode. |
| `steps` | | `Step[]` | [] | |
## Methods
| Method | Type |
|---------------------|--------------------------------------------------|
| `renderIcon` | `(step: Step, index: number): number \| TemplateResult<1> \| null` |
| `renderIconAndLine` | `(step: Step, index: number): TemplateResult<1>` |
## CSS Custom Properties
| Property | Type | Default | Description |
|----------------------------|------|---------|---------------------|
| `--fds-stepper-line-space` | text | "8px" | Stepper line space. |