11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
---
|
|
parts:
|
|
- Steps
|
|
- Overview
|
|
title: 'Steps: Overview'
|
|
eleventyNavigation:
|
|
key: 'Steps: Overview'
|
|
order: 10
|
|
parent: Steps
|
|
title: Overview
|
|
---
|
|
|
|
# Steps: Overview
|
|
|
|
A web component that can be used to break a single goal down into dependable sub-tasks.
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import '@lion/ui/define/lion-steps.js';
|
|
import '@lion/ui/define/lion-step.js';
|
|
```
|
|
|
|
```js preview-story
|
|
export const main = () => html`
|
|
<lion-steps>
|
|
<lion-step initial-step>
|
|
Step 1
|
|
<button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
|
|
Next
|
|
</button>
|
|
</lion-step>
|
|
<lion-step>
|
|
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
|
|
Previous
|
|
</button>
|
|
Step 2
|
|
<button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
|
|
Next
|
|
</button>
|
|
</lion-step>
|
|
<lion-step>
|
|
<button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
|
|
Previous
|
|
</button>
|
|
Step 3
|
|
</lion-step>
|
|
</lion-steps>
|
|
`;
|
|
```
|
|
|
|
## Features
|
|
|
|
- navigate between different steps with 'previous' and 'next' functions.
|
|
- keeps status of each step
|
|
- untouched
|
|
- entered
|
|
- left
|
|
- skipped
|
|
- options
|
|
- **initial-step**: Set to the first step of the flow, blocks calling `previous` function.
|
|
- **condition**: Dynamic condition, when true the step is added to the flow.
|
|
- **invert-condition**: Inverts the condition set.
|
|
|
|
In many application you build multi-step workflows like multi-step forms where you want to split a long process into smaller steps making the user's perception of it and filling in data easier. The idea of this component is to provide a simple way to define such steps and transition from one step to another while saving data between them and to conditionally skip some steps based on the data.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm i --save @lion/ui
|
|
```
|
|
|
|
```js
|
|
import { LionSteps, LionStep } from '@lion/ui/steps.js';
|
|
// or
|
|
import '@lion/ui/define/lion-steps.js';
|
|
import '@lion/ui/define/lion-step.js';
|
|
```
|