We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/ui-library

Usage

Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.

Webcomponent

<script type="module">
  import { defineCustomElement as defineCustomProgressIndicator } from '@tryg/ui-library/dist/components/anchor-progress-indicator';
  defineCustomProgressIndicator();
  import { defineCustomElement as defineCustomProgressStepIndicator } from '@tryg/ui-library/dist/components/anchorr-progress-indicator-step';
  defineCustomProgressStepIndicator();
</script>
<anchor-progress-indicator current-index="2">
  <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-progress-indicator current-index="1">
  <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
  <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

The Progress Indicator is a component that shows the user the steps they need to take to complete a form. It is a visual representation of the steps in a process, and it can be used to guide the user through a form or to show the user how far they have come in a survey.

Alternative labels

<anchor-progress-indicator current-index="2" alt-labels>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Hide labels

<anchor-progress-indicator current-index="2" hide-labels>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Is advancing

<anchor-progress-indicator current-index="2" is-advancing>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Is continuing

<anchor-progress-indicator current-index="2" is-continuing>
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Small

<anchor-progress-indicator current-index="2" size="small">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

Vertical orientation

<anchor-progress-indicator current-index="2" orientation="vertical">
    <anchor-progress-indicator-step label="Step 1"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 2"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 3"></anchor-progress-indicator-step>
    <anchor-progress-indicator-step label="Step 4"></anchor-progress-indicator-step>
</anchor-progress-indicator>

API

Progress indicator

anchor-progress-indicator

Properties

Property	Attribute	Description	Type	Default
`altLabels`	`alt-labels`	Use alternative labels for the steps	`boolean`	`false`
`currentIndex`	`current-index`	Which index is this step in the progress indicator	`number`	`0`
`hideLabels`	`hide-labels`	Hide the labels for the steps	`boolean`	`false`
`isAdvancing`	`is-advancing`	Is advancing the progress indicator flow	`boolean`	`false`
`isContinuing`	`is-continuing`	Is continuing the progress indicator flow	`boolean`	`false`
`orientation`	`orientation`	Orientation of the progress-indicator component	`"horizontal" \| "vertical"`	`'horizontal'`
`size`	`size`	Size of the progress-indicator component and it's steps	`"normal" \| "small"`	`'normal'`

Dependencies

Depends on

anchor-label

Graph

Built with StencilJS

Progress indicator step

anchor-progress-indicator-step

Properties

Property	Attribute	Description	Type	Default
`active`	`active`	Is this step active	`boolean`	`false`
`altLabels`	`alt-labels`	Use alternative labels for the step	`boolean`	`false`
`completed`	`completed`	Is this step complete	`boolean`	`false`
`disabled`	`disabled`	Is this step disabled	`boolean`	`false`
`hideLabels`	`hide-labels`	Hide the label for the step	`boolean`	`false`
`index`	`index`	Which index is this step in the progress indicator	`number`	`0`
`isFirst`	`is-first`	Is this the first step	`boolean`	`false`
`isLast`	`is-last`	Is this the last step	`boolean`	`false`
`label`	`label`	Label for the step	`string`	`undefined`
`orientation`	`orientation`	Orientation of the step component	`"horizontal" \| "vertical"`	`'vertical'`
`size`	`size`	Size of the step component	`"normal" \| "small"`	`'normal'`

Events

Event	Description	Type
`click`		`CustomEvent<any>`

Dependencies

Depends on

Graph

Built with StencilJS

Progress indicator3.0

Installation

Usage

Alternative labels

Hide labels

Is advancing

Is continuing

Small

Vertical orientation

API

Progress indicator

anchor-progress-indicator

Properties

Dependencies

Depends on

Graph

Progress indicator step

anchor-progress-indicator-step

Properties

Events

Dependencies

Depends on

Graph

On this page