Steps >> Overview ||10
A web component that can be used to break a single goal down into dependable sub-tasks.
import { html } from '@mdjs/mdjs-preview';
import '@lion/steps/define';
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.
-
initial-step: Set to the first step of the flow, blocks calling
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
npm i --save @lion/steps
import { LionSteps, LionStep } from '@lion/steps';
// or
import '@lion/steps/define';