Wondering what’s next for npm?Check out our public roadmap! »

    @lion/steps
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.3 • Public • Published

    Navigation >> Steps >> Overview ||10

    A web component that can be used to break a single goal down into dependable sub-tasks.

    import { html } from '@lion/core';
    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.

    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';

    Install

    npm i @lion/steps

    DownloadsWeekly Downloads

    129

    Version

    0.8.3

    License

    MIT

    Unpacked Size

    69.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar