Constructor
A CycleButton is a simple multi-state toggle button.
JavaScript:
-
new Coral.CycleButton()
ordocument.createElement('coral-cyclebutton')
HTML Tag:
-
<coral-cyclebutton>
Extends
Sub-components
Static Properties
-
Coral.CycleButton.displayMode {String}
-
Properties:
Name Type Value Description ICON String icon Icon display mode TEXT String text Text display mode ICON_TEXT String icontext Icon and text display mode
Enum for CycleButton displayMode values.
Instance Properties
-
instance.actions {Coral.Collection}
Readonly -
-
instance.displayMode {Coral.CycleButton.displayMode}
-
- Default Value:
- Coral.CycleButton.displayMode.ICON
- HTML Attribute:
- displaymode
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.icon {String}
-
- Default Value:
- ""
-
instance.items {Coral.Collection}
Readonly -
-
instance.selectedItem {HTMLElement}
Readonly -
-
instance.threshold {Number}
-
- Default Value:
- 3
- HTML Attribute:
- threshold
The Collection Interface that allows interaction with the Coral.CycleButton.Action elements.
See Coral.Collection for more details regarding Collection APIs.
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.
Whether this component is hidden or not.
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.
The Collection Interface that allows interacting with the items that the component contains. See
Coral.Collection for more details.
Returns the first selected item in the selectionList. The value
null
is returned if no element is
selected.
Number of items that can be directly cycled through before collapsing. If
0
is used, the items
will never be collapsed.
Methods
-
instance.get
-
- Parameters:
-
Name Type Description property String The name of the property to fetch the value of. - Returns:
-
Property value. {*}
- Inherited From:
-
instance.hide
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.off
-
- Parameters:
-
Name Type Optional Description eventName String No
The event name to stop listening for. selector String Yes
The selector that was used for event delegation. func function No
The function that was passed to on()
.useCapture Boolean Yes
Only remove listeners with useCapture
set to the value passed in. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.on
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to listen for. selector String Yes
The selector to use for event delegation. func function No
The function that will be called when the event is triggered. useCapture Boolean Yes
Whether or not to listen during the capturing or bubbling phase. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.remove
-
- Inherited From:
-
instance.set
-
- Parameters:
-
Name Type Description property String The name of the property to set. value * The value to set the property to. silent Boolean If true, events should not be triggered as a result of this set. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.show
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.trigger
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to trigger. props Object Yes
Additional properties to make available to handlers as event.detail
.bubbles Boolean Yes
Set to false
to prevent the event from bubbling.cancelable Boolean Yes
Set to false
to prevent the event from being cancelable. - Returns:
-
CustomEvent object {CustomEvent}
- Inherited From:
Get the value of a property.
Hide this component.
Remove an event listener.
Add an event listener.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
Set a single property.
Show this component.
Trigger an event.
Events
-
coral-collection:add
-
- Callback Parameters:
-
Name Type Description event Object Event object.
Name Type Description event.detail.item HTMLElement The item that was added.
- Inherited From:
-
coral-collection:remove
-
- Callback Parameters:
-
Name Type Description event Object Event object.
Name Type Description event.detail.item HTMLElement The item that was removed.
- Inherited From:
-
coral-component:attached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:detached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:ready
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.
- since 1.9.0, use
Triggered when an item is added to the Collection. Collection events are not synchronous so the DOM may reflect
a different reality although every addition or removal will be reported.
Triggered when an item is removed from a Collection. Collection events are not synchronous so the DOM may reflect
a different reality although every addition or removal will be reported.
Triggered when the component is attached to the DOM.
Triggered when the component is detached to the DOM.
Triggerred when the component has been upgraded and is ready for use.