Tag is a component used inside a Coral.TagList.

Tag attributes

|

multiline

By default, tags will truncate content if its too big for the tag's container. Add the multiline attribute to support mutli-line text instead of truncating.
This is an amazing long tag which should never ever be there but ... sometimes ...
Show Markup

            

Coral.Tag API

Constructor

JavaScript:

new Coral.Tag() or document.createElement('coral-tag')

HTML Tag:

<coral-tag>

Extends

Sub-components

Static Properties

Coral.Tag.color {String}

Color of the tag. By default they are semi-transparent unless otherwise stated.

Properties:

Name Type Value Description
DEFAULT String
GREY String grey
BLUE String blue
LIGHT_BLUE String lightblue
PERIWINKLE String periwinkle
PLUM String plum
FUCHSIA String fuchsia
MAGENTA String magenta
RED String red
ORANGE String orange
TANGERINE String tangerine
YELLOW String yellow
CHARTREUSE String chartreuse
GREEN String green
KELLY_GREEN String kellygreen
SEA_FOAM String seafoam
CYAN String cyan

Coral.Tag.size {String}

Enum for tag size values.

Properties:

Name Type Value Description
SMALL String S A default tag (non-interactive), height 20px without closable button.
MEDIUM String M A default tag (non-interactive), height 28px without closable button.
LARGE String L A default tag (interactive), height 32px without closable button.

Instance Properties

instance.closable {Boolean}

Reflected
Whether this component can be closed.
Default Value:
  • false
HTML Attribute:
  • closable

instance.color {Coral.Tag.color}

The tags's color.
Default Value:
  • Coral.Tag.color.DEFAULT
HTML Attribute:
  • color

instance.label {HTMLElement}

The tag's label element.

instance.multiline {Boolean}

Reflected
A multiline tag for block-level layout with multiline text.
Default Value:
  • false
HTML Attribute:
  • multiline

instance.quiet {Boolean}

Reflected
A quiet tag to differentiate it from default tag.
Default Value:
  • false
HTML Attribute:
  • quiet

instance.size {Coral.Tag.size}

The tag's size.
Default Value:
  • Coral.Tag.size.LARGE
HTML Attribute:
  • size

instance.value {String}

Reflected
Value of the tag. If not explicitly set, the value of Node.textContent is returned.
Default Value:
  • ""
HTML Attribute:
  • value

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:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

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:

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
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

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. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

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
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

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:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:hide

Triggerred after the component is hidden with Coral.Component#hide.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From: