Package Exports

@gold.au/progress-indicator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gold.au/progress-indicator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@gold.au/progress-indicator

Indicator of progress through a multitude of pages mostly used for forms.

Install
Usage
Dependency graph
Tests
Release History
License

Install

yarn add @gold.au/progress-indicator

npm install @gold.au/progress-indicator

⬆ back to top

Usage

React

⬆ back to top

React

Usage:

import AUprogressIndicator from './progress-indicator.js';

<AUprogressIndicator items={[
  {
    link: 'forms/intro/',
    text: 'Introduction',
    status: 'done',
  },
  {
    link: 'forms/contacts/',
    text: 'Business Contacts',
    status: 'doing',
    li: {
      className: 'li-wrapping-class',
    },
  },
  {
    link: 'forms/casestudies/',
    text: 'Case Studies',
    status: 'todo',
  },
]} />

All props:

<AUprogressIndicator
  dark={ false }             {/* A dark variation of the component */}
  linkComponent="a"          {/* The component used for the link, optional */}
  items={[                   {/* All steps in a neat array */}
    {
      link: 'forms/intro/',  {/* The link to this step, optional */}
      linkComponent: 'a',    {/* The component used for the link, optional */}
      text: 'Introduction',  {/* The name of this step */}
      status: 'done',        {/* The status of this step, can be: 'done', 'doing', 'todo' */}
      li: {},                {/* An object that will be spread onto the <li> tag, optional */}
      onClick={ () => {} }   {/* A function to execute when the link is clicked, optional */}
    },
  ]},
/>