CSS-Only Components

This section provides details on the few CSS-only components included in CoralUI. Use the 'Show Markup' feature to see how each CSS-only component should be implemented. To explore the rest of the CoralUI components, see the Components documentation.

DecoratedTextfield renders a Textfield with an embedded button, icon, or both.

Icon Only

Show Markup

                      

Button Only

Show Markup

                      

Icon and Button

Show Markup

            

Coral.Form styles examples shows a basic scenario, how the form styles can be used. Please look at the related components, to see more examples.

Vertical Layout

|

Add the coral-Form--vertical class to render all labels and fields on the same vertical line.

Read only text
Read only text Tooltip Information
Show Markup

            

Aligned Layout

|

Add the coral-Form--aligned class to render each label and field pair on the same horizontal line.

Read only text
Read only text Tooltip Information
Show Markup

            

Horizontal Layout

|

Add the coral-Form--horizontal class to render all labels and fields on the same horizontal line.

Show Markup

            

Headings are used to represent titles in content. The default CoralUI font styles cascade from coral--light theme, so that class must be specified at a higher level! See the Themes section of the Fundamentals documenation for more detail.

Heading Examples

|

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Show Markup

            

A CoralUI Coral.InputGroup is a composite CSS pattern for Buttons and Textfields that share a border. It is the base style of several more complex components due to its versatility.

InputGroup Examples

|

Button Before

Show Markup

                      

Button After

Show Markup

                      

Icon Buttons on Both Sides

Show Markup

                      

Text Buttons on Both Sides

Show Markup

                      

Block with Button Before

Show Markup

                      

Block with Button After

Show Markup

                      

Block with Text Buttons on Both Sides

Show Markup

                      

Block with Icon Buttons on Both Sides

Show Markup

            

Links get styled using the coral-Link class. The correct font styles get cascaded from coral--light so be sure you add it on a higher level!

Link Examples

|

Regular

This is a coral-Link.

Show Markup

                      

Subtle

This uses coral-Link--subtle.

Show Markup

            

RadioGroup Examples

|

Horizontal

By default, a coral-RadioGroup will align the coral-Radio horizontally.
Show Markup

                      

Vertical

Add the coral-RadioGroup--vertical class name for a vertical layout.
Show Markup

                      

Labels Below

Add the coral-RadioGroup--labelsBelow class name to have the labels placed below each item.
Show Markup

            

Table is a container component to display and manipulate data in two dimensions or more.

Content only

There are no saved activities in your account yet.

Get started now.

Show Markup

                          

Cell divider

Activities Numbers Date
Left Label Alpha 23,857 January 28, 2012 Right Label
Left Label Beta 20,398 December 1, 2011 Right Label
Left Label Charlie 3,498 February 15, 2012 Right Label
Show Markup

                          

Scrollable table with a sticky head

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2014
Echo 1,247 August 12, 2010
Foxtrot 90,034 September 15, 2000
Show Markup

                              

Sortable table columns

In this example, the cell value property is used to compare cells during a column sort. If not set, the sorting will be performed on the cell content. The content will be parse accordingly based on the column's sortabletype property.

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Show Markup

                              

Lockable rows

If rows are locked, they float to the top of the table and aren't affected by column sorting.

Activities Numbers Date
Beta 23,857 January 28, 2012
Alpha 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Show Markup

                              

Selectable row

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Show Markup

                              

Draggable columns and orderable rows

Rows can't be ordered if the table is in a sorted state.

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Show Markup

                              

Hidden columns

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012
Show Markup

                              

Handles

To define table actions on specific elements, handles can be used. A handle is given a special attribute :

  • [coral-table-select] - Click to select/unselect all table items.
  • [coral-tr-select] - Click to select parent item based on the table's selectionmode property.
  • [coral-tr-order] - Drag to order parent item based on the table's orderablemode property.
  • [coral-tr-lock] - Click to lock/unlock the row.

If a cell is empty and is given one of these special attributes, a default handle will be rendered and inserted in the cell. In addition, one can set a fixed width to the respective column via the column's fixedWidth property.

Activities Date
Alpha January 28, 2012
Beta December 1, 2011
Charlie February 15, 2012
Delta May 16, 2012
Show Markup

            

Custom sorting

If setting sortabletype to custom, columns won't sort based on the default table sorting. Instead, a custom sorting can be performed when triggered by user interaction. This can be defined by listening to the coral-table:beforecolumnsort event.

Activities
Show Markup

                      
                        

Coral.Table API

Constructor

JavaScript:

new Coral.Table() or document.createElement('coral-table')

HTML Tag:

<coral-table>

Extends

Sub-components

Static Properties

Coral.Table.orderableMode {String}

Enum for table orderable mode values.

Properties:

Name Type Value Description
NONE String none Not orderable
ROW String row Row orderable.

Coral.Table.selectionMode {String}

Enum for table selection mode values.

Properties:

Name Type Value Description
NONE String none No selection
ROW String row Row selection.

Instance Properties

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.lockable {Boolean}

Reflected
Whether the table rows can be locked/unlocked.
Default Value:
  • false
HTML Attribute:
  • lockable

instance.multiple {Boolean}

Reflected
Whether multiple items can be selected.
Default Value:
  • false
HTML Attribute:
  • multiple

instance.orderableMode {Coral.Table.orderableMode}

The orderable mode. If the table is sorted, ordering handles are hidden.
Default Value:
  • Coral.Table.orderableMode.NONE
HTML Attribute:
  • orderablemode

instance.selectedItem {HTMLElement}

Readonly
Returns the first selected item in the selectionList. The value null is returned if no element is selected.

instance.selectedItems {Array.<HTMLElement>}

Readonly
Returns an Array containing the selected items.

instance.selectionMode {Coral.Table.selectionMode}

The selection mode.
Default Value:
  • Coral.Table.selectionMode.NONE
HTML Attribute:
  • selectionmode

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: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-table:beforecolumndrag

Triggered before a column is dragged. Can be used to cancel column dragging.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.column Coral.Table.Column The dragged column.
event.detail.before Coral.Table.Column The column will be inserted before this sibling column. If null, the column is inserted at the end.

coral-table:beforecolumnsort

Triggered before a column gets sorted by user interaction. Can be used to cancel column sorting and define custom sorting.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.column Coral.Table.Column The column to be sorted.
event.detail.direction Coral.Table.Column.sortableDirection The requested sorting direction for the column.

coral-table:beforeroworder

Triggered before a row is ordered. Can be used to cancel row ordering.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.row Coral.Table.Row The row to be ordered.
event.detail.before Coral.Table.Row The row will be inserted before this sibling row. If null, the row is inserted at the end.

coral-table:change

Triggered when a table item is selected.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.oldSelection HTMLElement|Array.<HTMLElement> The old item selection. When Coral.Table#multiple, it includes an Array.
event.detail.selection HTMLElement|Array.<HTMLElement> The item selection. When Coral.Table#multiple, it includes an Array.

coral-table:columndrag

Triggered when a column is dragged.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.column Coral.Table.Column The dragged column.
event.detail.oldBefore Coral.Table.Column The column next sibling before the swap. If null, the column was the last item.
event.detail.before Coral.Table.Column The column is inserted before this sibling column. If null, the column is inserted at the end.

coral-table:columnsort

Triggered when a column is sorted.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.column Coral.Table.Column The sorted column.

coral-table:rowlock

Triggered when a row is locked.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.row Coral.Table.Row The locked row.

coral-table:roworder

Triggered when a row is ordered.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.row Coral.Table.Row The ordered row.
event.detail.oldBefore Coral.Table.Row The row next sibling before the swap. If null, the row was the last item.
event.detail.before Coral.Table.Row The row is inserted before this sibling row. If null, the row is inserted at the end.

coral-table:rowunlock

Triggered when a row is locked.
Callback Parameters:
Name Type Description
event Object

Event object

Name Type Description
event.detail.row Coral.Table.Row The unlocked row.

Coral.Table.Inner API

Constructor

JavaScript:

new Coral.Table.Inner() or document.createElement('table', 'coral-table-inner')

HTML Tag:

<table is="coral-table-inner">

Extends

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: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.Table.Column API

Constructor

JavaScript:

new Coral.Table.Column() or document.createElement('col', 'coral-col')

HTML Tag:

<col is="coral-col">

Extends

Static Properties

Coral.Table.Column.alignment {String}

Enum for cell alignment values.

Properties:

Name Type Value Description
LEFT String left Left alignment.
CENTER String center Center alignment.
RIGHT String right Right alignment.
JUSTIFY String justify Justify alignment.

Coral.Table.Column.sortableDirection {String}

Enum for cell sortable directions.

Properties:

Name Type Value Description
DEFAULT String default Default.
ASCENDING String ascending Ascending sort.
DESCENDING String descending Descending sort.

Coral.Table.Column.sortableType {String}

Enum for sortable type values.

Properties:

Name Type Value Description
ALPHANUMERIC String alphanumeric Alphanumeric type. If sorting is based on Coral.Table.Cell#value, use JavaScript String.
NUMBER String number Number type. If sorting is based on Coral.Table.Cell#value, use JavaScript Numbers
DATE String date Date type. If sorting is based on Coral.Table.Cell#value, use the date numeric value in milliseconds.
CUSTOM String custom Custom type. Sorting is based on user defined sorting.

Instance Properties

instance.alignment {Coral.Table.Column.alignment}

Reflected
The column cells alignment.
Default Value:
  • Coral.Table.Column.alignment.LEFT
HTML Attribute:
  • alignment

instance.draggable {Boolean}

Reflected
Whether the table column is draggable.
Default Value:
  • false
HTML Attribute:
  • draggable

instance.fixedWidth {Boolean}

Reflected
Whether the column has a fixed width.
Default Value:
  • false
HTML Attribute:
  • fixedwidth

instance.hidden {Boolean}

Reflected
Whether the column is hidden.
Default Value:
  • false
HTML Attribute:
  • hidden

instance.sortable {Boolean}

Reflected
Whether the column is sortable by user interaction.
Default Value:
  • false
HTML Attribute:
  • sortable

instance.sortableDirection {Coral.Table.Column.sortableDirection}

Reflected
The sorting direction. Sorts the column cells based on Coral.Table.Cell#value. If not present, the sort is based on the cell text content.
Default Value:
  • {Coral.Table.Column.sortableDirection.DEFAULT}
HTML Attribute:
  • sortabledirection

instance.sortableType {Coral.Table.Column.sortableType}

Reflected
The sorting type.
Default Value:
  • {Coral.Table.Column.sortableType.ALPHANUMERIC}
HTML Attribute:
  • sortabletype

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: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.Table.Head API

Constructor

JavaScript:

new Coral.Table.Head() or document.createElement('thead', 'coral-thead')

HTML Tag:

<thead is="coral-thead">

Extends

Instance Properties

instance.divider {Coral.mixin.tableSection.divider}

Reflected
The table section divider.
Inherited From:
Default Value:
  • Coral.mixin.tableSection.divider.NONE
HTML Attribute:
  • divider

instance.sticky {Boolean}

Reflected
Whether the table head is sticky. The table content becomes automatically scrollable if the table wrapper height is smaller than its content.
Default Value:
  • false
HTML Attribute:
  • sticky

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: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.Table.Body API

Constructor

JavaScript:

new Coral.Table.Body() or document.createElement('tbody', 'coral-tbody')

HTML Tag:

<tbody is="coral-tbody">

Extends

Mixes In

Static Properties

Coral.Table.Body.divider {String}

Enum for divider values.

Properties:

Name Type Value Description
ROW String row Row divider.
COLUMN String column Column divider.
CELL String cell Row and Column divider.

Instance Properties

instance.divider {Coral.mixin.tableSection.divider}

The table body divider.
Default Value:
  • Coral.mixin.tableSection.divider.ROW
HTML Attribute:
  • divider

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: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.Table.Foot API

Constructor

JavaScript:

new Coral.Table.Foot() or document.createElement('tfoot', 'coral-tfoot')

HTML Tag:

<tfoot is="coral-tfoot">

Extends

Instance Properties

instance.divider {Coral.mixin.tableSection.divider}

Reflected
The table section divider.
Inherited From:
Default Value:
  • Coral.mixin.tableSection.divider.NONE
HTML Attribute:
  • divider

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: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.Table.Row API

Constructor

JavaScript:

new Coral.Table.Row() or document.createElement('tr', 'coral-tr')

HTML Tag:

<tr is="coral-tr">

Extends

Mixes In

Instance Properties

instance.locked {Boolean}

Reflected
Whether the table row is locked.
Default Value:
  • false
HTML Attribute:
  • locked

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: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.Table.HeaderCell API

Constructor

JavaScript:

new Coral.Table.HeaderCell() or document.createElement('th', 'coral-th')

HTML Tag:

<th is="coral-th">

Extends

Sub-components

Instance Properties

instance.alignment {Coral.mixin.tableCell.alignment}

Reflected
The cell's alignment. Defaults to column alignment. If no column is present, defaults to left alignment.
Inherited From:
Default Value:
  • Coral.mixin.tableCell.alignment.COLUMN
HTML Attribute:
  • alignment

instance.label {HTMLElement}

The header cell's label.

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: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.Table.Cell API

Constructor

JavaScript:

new Coral.Table.Cell() or document.createElement('td', 'coral-td')

HTML Tag:

<td is="coral-td">

Extends

Sub-components

Instance Properties

instance.alignment {Coral.mixin.tableCell.alignment}

Reflected
The cell's alignment. Defaults to column alignment. If no column is present, defaults to left alignment.
Inherited From:
Default Value:
  • Coral.mixin.tableCell.alignment.COLUMN
HTML Attribute:
  • alignment

instance.label {HTMLElement}

The cell's label.

instance.value {String}

Reflected
The cell's value.
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:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

CoralUI provides the ability to display components in a light and dark theme. Themes are specified via the coral--light and coral--dark class modifiers on an ancestor of a component.

Light Theme

Show Markup

                      

Dark Theme

Show Markup

            

CoralUI provides some CSS utility classes that can be applied to any DOM element. These classes follow the SUIT convention of a u-coral- prefix.

Clear Fix

Applies the clearfix hack.

                              class="u-coral-clearFix"
                              

No Border

Removes all the borders of an element.

                              class="u-coral-noBorder"
                              

No Scroll

Stops an element from scrolling.

                              class="u-coral-noScroll"
                              

Screen-reader Only

Hides elements from visual browsers.

                              class="u-coral-screenReaderOnly"
                              

Cursor

A closed hand cursor that indicates an item is current grabbed.

                              class="u-coral-closedHand"
                              

An open hand cursor to indicate that an item can be grabbed.

                              class="u-coral-openHand"
                              

Wells are used to separate field groups or large blocks of text. They are specified using coral-Well.

Well Examples

|

Section 1

Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit dolore consectetur elit in enim esse consectetur amet do exercitation..

Section 2

Lorem ipsum Fugiat sit mollit incididunt in occaecat reprehenderit cillum magna Excepteur enim eu deserunt eiusmod dolor occaecat dolore officia mollit dolore consectetur elit in enim esse consectetur amet do exercitation..
Show Markup