Coral Spectrum
ExamplesPlaygroundReference Source

Function

Static Public Summary
public

Accordion item's content component
public

Accordion item's label component
public

The Alert default content
public

The Alert footer content
public

The Alert header content
public

The AnchorButton label content
public

A Banner Content component
public

A Banner Header component
public

BaseButton(superClass: *): *

The base element for Button components
public

BaseListItem(superClass: *): *

The base element for List Item components
public

The Button label content
public

The Card Asset
public

The Card Content
public

A Card context component
public

A Card description component
public

The Card Info
public

The Card Overlay
public

A Card Property Content component
public

A Card sub title component
public

A Card title component
public

The Checkbox label
public

ColumnView's Column content component
public

ColumnView's Item content component
public

ColumnView's Item thumbnail component
public

ColumnView's preview asset component
public

ColumnView's preview content component
public

ColumnView's preview label component
public

ColumnView's preview separator component
public

ColumnView's preview value component
public

The Dialog default content
public

The Dialog footer content
public

The Dialog header content
public

Drawer content component
public

The List item content
public

The Masonry Item Accessibility State
public

The Multifield item content
public

A PanelStack Item Content component
public

The Popover default content
public

The Popover footer content
public

The Popover header content
public

The Progress label content
public

The Radio label
public

The SelectList Item content
public

Shell's content component
public
this function was deprecated.

Shell's help separator
public

Shell HomeAnchor's label component
public

Shell's OrgSwitcher footer component
public

Shell's Solution label component
public
this function was deprecated.

Shell's solution sub-cloud name
public

Shell's User content component
public

Shell's User footer component
public

Shell's User heading component
public

Shell's User name component
public

Shell's User subheading component
public

The SideNav Heading
public

The SideNav Item Content
public

Slider's content component
public

The Status Label
public

A Step Label
public

The Switch label
public

Tab's label component
public

The Table HeaderCell content
public

Tag's label component
public

The Toast default content
public

Tooltip's content component
public

Tree item's content component
public

loadIcons(svgURL: *)

Static Public

public AccordionItemContent(): HTMLElement source 

import {Accordion} from '@adobe/coral-spectrum/coral-component-accordion'

Accordion item's content component

Return:

HTMLElement

Example:

Markup
<coral-accordion-item-content></coral-accordion-item-content>
JS constructor
new Coral.Accordion.Item.Content();

See:

public AccordionItemLabel(): HTMLElement source 

import {Accordion} from '@adobe/coral-spectrum/coral-component-accordion'

Accordion item's label component

Return:

HTMLElement

Example:

Markup
<coral-accordion-item-label></coral-accordion-item-label>
JS constructor
new Coral.Accordion.Item.Label();

See:

public AlertContent(): HTMLElement source 

import {Alert} from '@adobe/coral-spectrum/coral-component-alert'

The Alert default content

Return:

HTMLElement

Example:

Markup
<coral-alert-content></coral-alert-content>
JS constructor
new Coral.Alert.Content();

See:

public AlertFooter(): HTMLElement source 

import {Alert} from '@adobe/coral-spectrum/coral-component-alert'

The Alert footer content

Return:

HTMLElement

Example:

Markup
<coral-alert-footer></coral-alert-footer>
JS constructor
new Coral.Alert.Footer();

See:

public AlertHeader(): HTMLElement source 

import {Alert} from '@adobe/coral-spectrum/coral-component-alert'

The Alert header content

Return:

HTMLElement

Example:

Markup
<coral-alert-header></coral-alert-header>
JS constructor
new Coral.Alert.Header();

See:

public AnchorButtonLabel(): HTMLElement source 

import {AnchorButton} from '@adobe/coral-spectrum/coral-component-anchorbutton'

The AnchorButton label content

Return:

HTMLElement

Example:

Markup
<coral-anchorbutton-label></coral-anchorbutton-label>
JS constructor
new Coral.AnchorButton.Label();

See:

public BannerContent(): HTMLElement source 

import {Banner} from '@adobe/coral-spectrum/coral-component-banner'

A Banner Content component

Return:

HTMLElement

Example:

Markup
<coral-banner-content></coral-banner-content>
JS constructor
new Coral.Banner.Content();

See:

public BannerHeader(): HTMLElement source 

import {Banner} from '@adobe/coral-spectrum/coral-component-banner'

A Banner Header component

Return:

HTMLElement

Example:

Markup
<coral-banner-header></coral-banner-header>
JS constructor
new Coral.Banner.Header();

See:

public BaseButton(superClass: *): * source

The base element for Button components

Params:

NameTypeAttributeDescription
superClass *

Return:

*

public BaseListItem(superClass: *): * source

The base element for List Item components

Params:

NameTypeAttributeDescription
superClass *

Return:

*

public ButtonLabel(): HTMLElement source 

import {Button} from '@adobe/coral-spectrum/coral-component-button'

The Button label content

Return:

HTMLElement

Example:

Markup
<coral-button-label></coral-button-label>
JS constructor
new Coral.Button.Label();

See:

public CardAsset(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

The Card Asset

Return:

HTMLElement

Example:

Markup
<coral-card-asset></coral-card-asset>
JS constructor
new Coral.Card.Asset();

See:

public CardContent(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

The Card Content

Return:

HTMLElement

Example:

Markup
<coral-card-content></coral-card-content>
JS constructor
new Coral.Card.Content();

See:

public CardContext(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

A Card context component

Return:

HTMLElement

Example:

Markup
<coral-card-context></coral-card-context>
JS constructor
new Coral.Card.Context();

See:

public CardDescription(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

A Card description component

Return:

HTMLElement

Example:

Markup
<coral-card-description></coral-card-description>
JS constructor
new Coral.Card.Description();

See:

public CardInfo(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

The Card Info

Return:

HTMLElement

Example:

Markup
<coral-card-info></coral-card-info>
JS constructor
new Coral.Card.Info();

See:

public CardOverlay(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

The Card Overlay

Return:

HTMLElement

Example:

Markup
<coral-card-overlay></coral-card-overlay>
JS constructor
new Coral.Card.Overlay();

See:

public CardPropertyContent(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

A Card Property Content component

Return:

HTMLElement

Example:

Markup
<coral-card-property-content></coral-card-property-content>
JS constructor
new Coral.Card.Property.Content();

See:

public CardSubtitle(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

A Card sub title component

Return:

HTMLElement

Example:

Markup
<coral-card-subtitle></coral-card-subtitle>
JS constructor
new Coral.Card.Subtitle();

See:

public CardTitle(): HTMLElement source 

import {Card} from '@adobe/coral-spectrum/coral-component-card'

A Card title component

Return:

HTMLElement

Example:

Markup
<coral-card-title></coral-card-title>
JS constructor
new Coral.Card.Title();

See:

public CheckboxLabel(): HTMLElement source 

import {Checkbox} from '@adobe/coral-spectrum/coral-component-checkbox'

The Checkbox label

Return:

HTMLElement

Example:

Markup
<coral-checkbox-label></coral-checkbox-label>
JS constructor
new Coral.Checkbox.Label();

See:

public ColumnViewColumnContent(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's Column content component

Return:

HTMLElement

Example:

Markup
<coral-columnview-column-content></coral-columnview-column-content>
JS constructor
new Coral.ColumnView.Column.Content();

See:

public ColumnViewItemContent(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's Item content component

Return:

HTMLElement

Example:

Markup
<coral-columnview-item-content></coral-columnview-item-content>
JS constructor
new Coral.ColumnView.Item.Content();

See:

public ColumnViewItemThumbnail(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's Item thumbnail component

Return:

HTMLElement

Example:

Markup
<coral-columnview-item-thumbnail></coral-columnview-item-thumbnail>
JS constructor
new Coral.ColumnView.Item.Thumbnail();

See:

public ColumnViewPreviewAsset(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's preview asset component

Return:

HTMLElement

Example:

Markup
<coral-columnview-preview-asset></coral-columnview-preview-asset>
JS constructor
new Coral.ColumnView.Preview.Asset();

See:

public ColumnViewPreviewContent(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's preview content component

Return:

HTMLElement

Example:

Markup
<coral-columnview-preview-content></coral-columnview-preview-content>
JS constructor
new Coral.ColumnView.Preview.Content();

See:

public ColumnViewPreviewLabel(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's preview label component

Return:

HTMLElement

Example:

Markup
<coral-columnview-preview-label></coral-columnview-preview-label>
JS constructor
new Coral.ColumnView.Preview.Label();

See:

public ColumnViewPreviewSeparator(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's preview separator component

Return:

HTMLElement

Example:

Markup
<coral-columnview-preview-separator></coral-columnview-preview-separator>
JS constructor
new Coral.ColumnView.Preview.Separator();

See:

public ColumnViewPreviewValue(): HTMLElement source 

import {ColumnView} from '@adobe/coral-spectrum/coral-component-columnview'

ColumnView's preview value component

Return:

HTMLElement

Example:

Markup
<coral-columnview-preview-value></coral-columnview-preview-value>
JS constructor
new Coral.ColumnView.Preview.Value();

See:

public DialogContent(): HTMLElement source 

import {Dialog} from '@adobe/coral-spectrum/coral-component-dialog'

The Dialog default content

Return:

HTMLElement

Example:

Markup
<coral-dialog-content></coral-dialog-content>
JS constructor
new Coral.Dialog.Content();

See:

public DialogFooter(): HTMLElement source 

import {Dialog} from '@adobe/coral-spectrum/coral-component-dialog'

The Dialog footer content

Return:

HTMLElement

Example:

Markup
<coral-dialog-footer></coral-dialog-footer>
JS constructor
new Coral.Dialog.Footer();

See:

public DialogHeader(): HTMLElement source 

import {Dialog} from '@adobe/coral-spectrum/coral-component-dialog'

The Dialog header content

Return:

HTMLElement

Example:

Markup
<coral-dialog-header></coral-dialog-header>
JS constructor
new Coral.Dialog.Header();

See:

public DrawerContent(): HTMLElement source 

import {Drawer} from '@adobe/coral-spectrum/coral-component-drawer'

Drawer content component

Return:

HTMLElement

Example:

Markup
<coral-drawer-content></coral-drawer-content>
JS constructor
new Coral.Drawer.Content();

See:

public ListItemContent(): HTMLElement source 

import {List} from '@adobe/coral-spectrum/coral-component-list'

The List item content

Return:

HTMLElement

Example:

Markup
<coral-list-item-content></coral-list-item-content>
JS constructor
new Coral.List.Item.Content();

See:

public MasonryItemAccessibilityState(): * source 

import {Masonry} from '@adobe/coral-spectrum/coral-component-masonry'

The Masonry Item Accessibility State

Return:

*

Example:

Markup
<coral-masonry-item-accessibilitystate></coral-masonry-item-accessibilitystate>
JS constructor
new Coral.Masonry.Item.AccessibilityState();

See:

public MultifieldItemContent(): HTMLElement source 

import {Multifield} from '@adobe/coral-spectrum/coral-component-multifield'

The Multifield item content

Return:

HTMLElement

Example:

Markup
<coral-multifield-item-content></coral-multifield-item-content>
JS constructor
new Coral.Multifield.Item.Content();

See:

public PanelContent(): HTMLElement source 

import {Panel} from '@adobe/coral-spectrum/coral-component-panelstack'

A PanelStack Item Content component

Return:

HTMLElement

Example:

Markup
<coral-panel-content></coral-panel-content>
JS constructor
new Coral.Panel.Content();

See:

public PopoverContent(): HTMLElement source 

import {Popover} from '@adobe/coral-spectrum/coral-component-popover'

The Popover default content

Return:

HTMLElement

Example:

Markup
<coral-popover-content></coral-popover-content>
JS constructor
new Coral.Popover.Content();

See:

public PopoverFooter(): HTMLElement source 

import {Popover} from '@adobe/coral-spectrum/coral-component-popover'

The Popover footer content

Return:

HTMLElement

Example:

Markup
<coral-popover-footer></coral-popover-footer>
JS constructor
new Coral.Popover.Footer();

See:

public PopoverHeader(): HTMLElement source 

import {Popover} from '@adobe/coral-spectrum/coral-component-popover'

The Popover header content

Return:

HTMLElement

Example:

Markup
<coral-popover-header></coral-popover-header>
JS constructor
new Coral.Popover.Header();

See:

public ProgressLabel(): HTMLElement source 

import {Progress} from '@adobe/coral-spectrum/coral-component-progress'

The Progress label content

Return:

HTMLElement

Example:

Markup
<coral-progress-label></coral-progress-label>
JS constructor
new Coral.Progress.Label();

See:

public RadioLabel(): HTMLElement source 

import {Radio} from '@adobe/coral-spectrum/coral-component-radio'

The Radio label

Return:

HTMLElement

Example:

Markup
<coral-radio-label></coral-radio-label>
JS constructor
new Coral.Radio.Label();

See:

public SelectListItemContent(): HTMLElement source 

import {SelectList} from '@adobe/coral-spectrum/coral-component-list'

The SelectList Item content

Return:

HTMLElement

Example:

Markup
<coral-selectlist-item-content></coral-selectlist-item-content>
JS constructor
new Coral.SelectList.Item.Content();

See:

public ShellContent(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's content component

Return:

HTMLElement

Example:

Markup
<coral-shell-content></coral-shell-content>
JS constructor
new Coral.Shell.Content();

See:

public ShellHelpSeparator(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'
this function was deprecated.

Shell's help separator

Return:

HTMLElement

Example:

Markup
<coral-shell-help-separator></coral-shell-help-separator>
JS constructor
new Coral.Shell.Help.Separator();

See:

public ShellHomeAnchorLabel(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell HomeAnchor's label component

Return:

HTMLElement

Example:

Markup
<coral-shell-homeanchor-label></coral-shell-homeanchor-label>
JS constructor
new Coral.Shell.HomeAnchor.Label();

See:

public ShellOrgSwitcherFooter(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's OrgSwitcher footer component

Return:

HTMLElement

Example:

Markup
<coral-shell-orgswitcher-footer></coral-shell-orgswitcher-footer>
JS constructor
new Coral.Shell.OrgSwitcher.Footer();

See:

public ShellSolutionLabel(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's Solution label component

Return:

HTMLElement

Example:

Markup
<coral-shell-solution-label></coral-shell-solution-label>
JS constructor
new Coral.Shell.Solution.Label();

See:

public ShellSolutionsHeader(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'
this function was deprecated.

Shell's solution sub-cloud name

Return:

HTMLElement

Example:

Markup
<coral-shell-solutions-header></coral-shell-solutions-header>
JS constructor
new Coral.Shell.Solutions.Header();

See:

public ShellUserContent(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's User content component

Return:

HTMLElement

Example:

Markup
<coral-shell-user-content></coral-shell-user-content>
JS constructor
new Coral.Shell.User.Content();

See:

public ShellUserFooter(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's User footer component

Return:

HTMLElement

Example:

Markup
<coral-shell-user-footer></coral-shell-user-footer>
JS constructor
new Coral.Shell.User.Footer();

See:

public ShellUserHeading(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's User heading component

Return:

HTMLElement

Example:

Markup
<coral-shell-user-heading></coral-shell-user-heading>
JS constructor
new Coral.Shell.User.Heading();

See:

public ShellUserName(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's User name component

Return:

HTMLElement

Example:

Markup
<coral-shell-user-name></coral-shell-user-name>
JS constructor
new Coral.Shell.User.Name();

See:

public ShellUserSubheading(): HTMLElement source 

import {Shell} from '@adobe/coral-spectrum/coral-component-shell'

Shell's User subheading component

Return:

HTMLElement

Example:

Markup
<coral-shell-user-subheading></coral-shell-user-subheading>
JS constructor
new Coral.Shell.User.Subheading();

See:

public SideNavHeading(): HTMLElement source 

import {SideNav} from '@adobe/coral-spectrum/coral-component-sidenav'

The SideNav Heading

Return:

HTMLElement

Example:

Markup
<coral-sidenav-heading></coral-sidenav-heading>
JS constructor
new Coral.SideNav.Heading();

See:

public SideNavItemContent(): HTMLElement source 

import {SideNav} from '@adobe/coral-spectrum/coral-component-sidenav'

The SideNav Item Content

Return:

HTMLElement

Example:

Markup
<coral-sidenav-item-content></coral-sidenav-item-content>
JS constructor
new Coral.SideNav.Item.Content();

See:

public SliderContent(): HTMLElement source 

import {Slider} from '@adobe/coral-spectrum/coral-component-slider'

Slider's content component

Return:

HTMLElement

Example:

Markup
<coral-slider-content></coral-slider-content>
JS constructor
new Coral.Slider.Content();

See:

public StatusLabel(): HTMLElement source 

import {Status} from '@adobe/coral-spectrum/coral-component-status'

The Status Label

Return:

HTMLElement

Example:

Markup
<coral-status-label></coral-status-label>
JS constructor
new Coral.Status.Label();

See:

public StepLabel(): HTMLElement source 

import {Step} from '@adobe/coral-spectrum/coral-component-steplist'

A Step Label

Return:

HTMLElement

Example:

Markup
<coral-step-label></coral-step-label>
JS constructor
new Coral.Step.Label();

See:

public SwitchLabel(): HTMLElement source 

import {Switch} from '@adobe/coral-spectrum/coral-component-switch'

The Switch label

Return:

HTMLElement

Example:

Markup
<coral-switch-label></coral-switch-label>
JS constructor
new Coral.Switch.Label();

See:

public TabLabel(): HTMLElement source 

import {Tab} from '@adobe/coral-spectrum/coral-component-tablist'

Tab's label component

Return:

HTMLElement

Example:

Markup
<coral-tab-label></coral-tab-label>
JS constructor
new Coral.Tab.Label();

See:

public TableHeaderCellContent(): HTMLElement source 

import {Table} from '@adobe/coral-spectrum/coral-component-table'

The Table HeaderCell content

Return:

HTMLElement

Example:

Markup
<coral-table-headercell-content></coral-table-headercell-content>
JS constructor
new Coral.Table.HeaderCell.Content();

See:

public TagLabel(): HTMLElement source 

import {Tag} from '@adobe/coral-spectrum/coral-component-taglist'

Tag's label component

Return:

HTMLElement

Example:

Markup
<coral-tag-label></coral-tag-label>
JS constructor
new Coral.Tag.Label();

See:

public ToastContent(): HTMLElement source 

import {Toast} from '@adobe/coral-spectrum/coral-component-toast'

The Toast default content

Return:

HTMLElement

Example:

Markup
<coral-toast-content></coral-toast-content>
JS constructor
new Coral.Toast.Content();

See:

public TooltipContent(): HTMLElement source 

import {Tooltip} from '@adobe/coral-spectrum/coral-component-tooltip'

Tooltip's content component

Return:

HTMLElement

Example:

Markup
<coral-tooltip-content></coral-tooltip-content>
JS constructor
new Coral.Tooltip.Content();

See:

public TreeItemContent(): HTMLElement source 

import {Tree} from '@adobe/coral-spectrum/coral-component-tree'

Tree item's content component

Return:

HTMLElement

Example:

Markup
<coral-tree-item-content></coral-tree-item-content>
JS constructor
new Coral.Tree.Item.Content();

See:

public loadIcons(svgURL: *) source 

import {loadIcons} from '@adobe/coral-spectrum/coral-component-icon'

Params:

NameTypeAttributeDescription
svgURL *