Reference Source
import {StepList} from '@adobe/coral-spectrum'
public class | source

StepList

Expression Extends:

class StepList extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A StepList component that holds a collection of steps.

See:

Example:

Markup
<coral-steplist></coral-steplist>
JS constructor
new Coral.StepList();

Static Member Summary

Static Public Members
public static

Returns StepList interaction options.

public static

Returns StepList sizes.

Member Summary

Public Members
public

Whether Steps should be interactive or not.

public

The Collection Interface that allows interacting with the items that the component contains.

public

Returns the selected step.

public

The size of the StepList.

public

The target component that will be linked to the StepList.

Method Summary

Public Methods
public

next()

Show the next Step.

public

Show the previous Step.

Static Public Members

public static interaction: StepListInteractionEnum: * source

Returns StepList interaction options.

public static size: StepListSizeEnum: * source

Returns StepList sizes.

Public Members

public interaction: String source

Whether Steps should be interactive or not. When interactive, a Step can be clicked to jump to it. See StepListInteractionEnum.

  • StepListInteractionEnum.OFF by default.
  • reflected

public items: SelectableCollection source

The Collection Interface that allows interacting with the items that the component contains.

  • read-only

public selectedItem: HTMLElement source

Returns the selected step.

  • read-only

public size: String source

The size of the StepList. It accepts both lower and upper case sizes. Currently only "S" and "L" (the default) are available. See StepListSizeEnum.

  • StepListSizeEnum.LARGE by default.
  • reflected

public target: HTMLElement | String source

The target component that will be linked to the StepList. It accepts either a CSS selector or a DOM element. If a CSS Selector is provided, the first matching element will be used. Items will be selected based on the index. If both target and Coral.Step#target are set, the second will have higher priority.

  • null by default.

Public Methods

public next() source

Show the next Step.

Emit:

coral-steplist:change

public previous() source

Show the previous Step.

Emit:

coral-steplist:change