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

CycleButton

Expression Extends:

class CycleButton extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A CycleButton component is a simple multi-state toggle button that toggles between the possible items below a certain threshold, and shows them in a popover selector when above.

See:

Example:

Markup
<coral-cyclebutton></coral-cyclebutton>
JS constructor
new Coral.CycleButton();

Static Member Summary

Static Public Members
public static

Returns CycleButton display options.

Member Summary

Public Members
public

The Collection Interface that allows interaction with the CycleButtonAction elements.

public

The CycleButton's displayMode. This defines how the selected item is displayed. If the selected item does not have the necessary icon or text information then fallback to show whichever is available. The appearance of collapsed items in the popover are not affected by this property. The displayMode property can be set on an item to override the component level value when that item is selected. See CycleButtonDisplayModeEnum.

  • CycleButtonDisplayModeEnum.ICON by default.
  • reflected

public

General icon of the CycleButton.

public

id: *

public

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

public

Returns the inner overlay to allow customization.

public

The selected item in the CycleButton.

public

Number of items that can be directly cycled through before collapsing.

Static Public Members

public static displayMode: CycleButtonDisplayModeEnum: * source

Returns CycleButton display options.

Public Members

public actions: SelectableCollection source

The Collection Interface that allows interaction with the CycleButtonAction elements.

  • read-only

public displayMode: String source

The CycleButton's displayMode. This defines how the selected item is displayed. If the selected item does not have the necessary icon or text information then fallback to show whichever is available. The appearance of collapsed items in the popover are not affected by this property. The displayMode property can be set on an item to override the component level value when that item is selected. See CycleButtonDisplayModeEnum.

  • CycleButtonDisplayModeEnum.ICON by default.
  • reflected

public icon: String source

General icon of the CycleButton. The icon will be displayed no matter the selection. If the selected item has its own icon, it will be overwritten.

  • "" by default.
  • reflected

public id: * source

public items: SelectableCollection source

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

  • read-only

public overlay: Popover source

Returns the inner overlay to allow customization.

  • read-only

public selectedItem: HTMLElement source

The selected item in the CycleButton.

  • read-only

public threshold: Number source

Number of items that can be directly cycled through before collapsing. If 0 is used, the items will never be collapsed.

  • 3 by default.
  • reflected