Sub-components

• Coral.Shell.User.Content
• Coral.Shell.User.Footer
• Coral.Shell.User.Heading
• Coral.Shell.User.Name
• Coral.Shell.User.Subheading

Instance Properties

instance.avatar {String}

Specifies the asset used inside the avatar view. See Coral.Icon for valid usage and icon names.

Default Value:

• user (Shows a placeholder user icon from the icon font)

HTML Attribute:

• avatar

See:

• Coral.Icon

instance.avatar {String}

Avatar assets should use one of those provided, when no asset is set

Properties:

Name	Type	Value	Description
DEFAULT	String	user	Default avatar, show user icon from icon font.

instance.content {HTMLElement}

The main content zone of the user-menu.

instance.footer {HTMLElement}

The footer content zone of the user-menu.

instance.heading {HTMLElement}

The heading content zone of the user-menu.

instance.hidden {Boolean}

Reflected

Whether this component is hidden or not.

Inherited From:

• Coral.Component#hidden

Default Value:

• false

HTML Attribute:

• hidden

instance.name {HTMLElement}

The name content zone of the user-menu.

instance.subheading {HTMLElement}

The subheading content zone of the user-menu.

Methods

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

• Coral.Component#get

instance.hide

Hide this component.

Returns:

this, chainable {Coral.Component}

Inherited From:

• Coral.Component#hide

instance.off

Remove an event listener.

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:

• Coral.Component#off

instance.on

Add an event listener.

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:

• Coral.Component#on

instance.remove

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.

Inherited From:

• Coral.Component#remove

instance.set

Set a single property.

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:

• Coral.Component#set

instance.show

Show this component.

Returns:

this, chainable {Coral.Component}

Inherited From:

• Coral.Component#show

instance.trigger

Trigger an event.

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:

• Coral.Component#trigger

Events

coral-component:attached

Triggered when the component is attached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:attached

Deprecated:

• since 1.14.0, use MutationObserver instead.

coral-component:detached

Triggered when the component is detached to the DOM.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:detached

Deprecated:

• since 1.14.0, use MutationObserver instead.

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.

Callback Parameters:

Name	Type	Description
event	Object	Event object.

Inherited From:

• Coral.Component#coral-component:ready

Deprecated:

• since 1.9.0, use Coral.commons.ready() instead.