Reference Source

Variable

Static Public Summary
public

An Accordion component consisting of multiple collapsible items.

public

A Accordion item component

public

An ActionBar component containing arbitrary items.

public
this variable was deprecated.

An ActionBar container component

public

An ActionBar item component

public

An ActionBar primary component

public

An ActionBar secondary component

public

Alert: *

An Alert component used as static indicators of an operation's result, or as messages to highlight information to the user. It does not include a close button by default, but you can add it manually by adding the coral-close attribute on an element contained by the Alert.

public

A Link component rendering as a button allowing us to style an anchor element that both looks and behaves like a button rather than a link.

public

An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis.

public

An AnchorList item component

public

An Autocomplete component that allows users to search and select from a list of options.

public

The Autocomplete Item

public

Banner: *

A Banner component

public

Button: *

A Button component containing text and/or an icon.

public

A ButtonGroup component that can be used as a selection form field.

public

A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis.

public

An ButtonList item component

public

A Calendar component that can be used as a date selection form field.

public

Card: *

A Card component to display content in different variations.

public

A Card property component

public

The Card PropertyList component

public

A CharacterCount component that indicates the remaining characters in a Textfield or Textarea.

public

A Checkbox component to be used as a form field.

public

A CheckboxGroup component to group checkbox fields

public

Clock: *

A Clock component that can be used as a time selection form field.

public

A coach mark component to highlight UI elements on the page.

public

ColorFormats: {"HSL": string, "HSV": string, "RGB": string, "PRGB": string, "HEX": string, "HEX3": string, "HEX4": string, "HEX8": string, "NAME": string}

Copyright 2021 Adobe.

public

A ColorInput component than can be used as a form field to select from a list of color options.

public

A ColorInput Color properties component

public

A ColorInput Item component

public

A ColorInput Slider component

public

A ColorInput Swatch component

public

A ColorInput Swatches component

public

A ColumnView component to display and allow users to browse and select items in a dynamic tree structure (e.g.

public

A ColumnView Column component

public

A ColumnView Item component

public

A ColumnView Preview component

public

A CycleButton component is a simple multi-state toggle button that toggles between the possible items below a certain threshold, and shows them in a popover selector when above.

public

A CycleButton Action component

public

A CycleButton Item component

public

A Datepicker component that can be used as a date and time selection form field.

public

Dialog: *

A Dialog component that supports various use cases with custom content.

public

Drawer: *

A Drawer component to display content that can be opened and closed with a sliding animation.

public

A FileUpload component that manages the upload process of multiple files.

public

Icon: *

An Icon component.

public

List: *

A List component that supports multi-line text, icons, and text wrapping with ellipsis.

public

The List divider

public

A List item component

public

Masonry: *

A Masonry component that allows to lay out items in a masonry grid.

public

A Masonry Item component

public

A Multifield component that enables adding, reordering, and removing multiple instances of a component.

public

A Multifield item component.

public

A NumberInput component is a numeric control form field.

public

Overlay: *

public

Panel: *

A Panel component

public

A PanelStack component holding a collection of panels.

public

Popover: *

A Popover component for small overlay content.

public

The Popover separator

public

A Progress component to indicate progress of processes.

public

A QuickActions component is an overlay component that reveals actions when interacting with a container.

public

A QuickActions item component

public

Radio: *

A Radio component to be used as a form field.

public

A RadioGroup component to group radio fields

public

A Ranged Slider

public
public

Copyright 2020 Adobe.

public
public

Search: *

A Search component is a search styled form field.

public

Select: *

A Select component is a form field that allows users to select from a list of options.

public

A Select item component

public

A SelectList component is a selectable list of items.

public

A SelectList group component

public

A SelectList item component

public

SideNav: *

A Side Navigation component to navigate the entire content of a product or a section.

public

A SideNav Item component.

public

A SideNav Level component

public

Slider: *

public

The Slider item

public

A Split Button component composed of an action and a trigger AnchorButton or Button.

public

Status: *

A Status component to describe the condition of another entity.

public

Step: *

A Step component

public

A StepList component that holds a collection of steps.

public

Switch: *

A Switch component is a toggle form field similar to a Checkbox component.

public

Tab: *

A Tab component

public

TabView: *

A TabView component is the wrapping container used to create the typical Tabbed pattern.

public

Table: *

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

public

A Table body component

public

A Table cell component

public

A Table column component

public

A Table foot component

public

A Table head component

public

A Table header cell component

public

A Table row component

public

Tag: *

A Tag component

public

TagList: *

A TagList component is a form field container to manipulate tags.

public

A Textarea component is the default multi-line text form field.

public

A Textfield component is the default single line text form field.

public

Toast: *

Toasts display brief temporary notifications.

public

Tooltip: *

A Tooltip component that can be attached to any element and may be displayed immediately or on hovering the target element.

public

Tree: *

A Tree component is a container component to display collapsible content.

public

A Tree item component

public

Wait: *

A Wait component to be used to indicate a process that is in-progress for an indefinite amount of time.

public

A WizardView component is the wrapping container used to create the typical Wizard pattern.

public
public
public
public

An i18n service.

public

A key listener for global hotkeys is exposed for document eventing handling.

public

Used to store i18n strings.

public
public
public

Static Public

public Accordion: * source

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

An Accordion component consisting of multiple collapsible items.

Example:

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

See:

public AccordionItem: * source

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

A Accordion item component

Example:

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

See:

public ActionBar: * source

import {ActionBar} from '@adobe/coral-spectrum'

An ActionBar component containing arbitrary items. An item can either be added to the left or the right side of the bar. All items that do not fit into the bar are hidden but still accessible.

Example:

Markup
<coral-actionbar></coral-actionbar>
JS constructor
new Coral.ActionBar();

See:

public ActionBarContainer: * source

import {ActionBar} from '@adobe/coral-spectrum'
this variable was deprecated.

An ActionBar container component

Example:

Markup
<coral-actionbar-container></coral-actionbar-container>
JS constructor
new Coral.ActionBar.Container();

See:

public ActionBarItem: * source

import {ActionBar} from '@adobe/coral-spectrum'

An ActionBar item component

Example:

Markup
<coral-actionbar-item></coral-actionbar-item>
JS constructor
new Coral.ActionBar.Item();

See:

public ActionBarPrimary: * source

import {ActionBar} from '@adobe/coral-spectrum'

An ActionBar primary component

Example:

Markup
<coral-actionbar-primary></coral-actionbar-primary>
JS constructor
new Coral.ActionBar.Primary();

See:

public ActionBarSecondary: * source

import {ActionBar} from '@adobe/coral-spectrum'

An ActionBar secondary component

Example:

Markup
<coral-actionbar-secondary></coral-actionbar-secondary>
JS constructor
new Coral.ActionBar.Secondary();

See:

public Alert: * source

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

An Alert component used as static indicators of an operation's result, or as messages to highlight information to the user. It does not include a close button by default, but you can add it manually by adding the coral-close attribute on an element contained by the Alert.

Example:

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

See:

public AnchorButton: * source

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

A Link component rendering as a button allowing us to style an anchor element that both looks and behaves like a button rather than a link. It can receive keyboard focus regardless of whether or not it has an href attribute, can be activated using either the SPACE key or the ENTER key, and is identified to assistive technology as a button element.

Example:

Markup
<a is="coral-anchorbutton"></a>
JS constructor
new Coral.AnchorButton();

See:

public AnchorList: * source

import {AnchorList} from '@adobe/coral-spectrum'

An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis.

Example:

Markup
<coral-anchorlist></coral-anchorlist>
JS constructor
new Coral.AnchorList();

See:

public AnchorListItem: * source

import {AnchorList} from '@adobe/coral-spectrum'

An AnchorList item component

Example:

Markup
<coral-anchorlist-item></coral-anchorlist-item>
JS constructor
new Coral.AnchorList.Item();

See:

public Autocomplete: * source

import {Autocomplete} from '@adobe/coral-spectrum'

An Autocomplete component that allows users to search and select from a list of options.

Example:

Markup
<coral-autocomplete></coral-autocomplete>
JS constructor
new Coral.Autocomplete();

See:

public AutocompleteItem: * source

import {Autocomplete} from '@adobe/coral-spectrum'

The Autocomplete Item

Example:

Markup
<coral-autocomplete-item></coral-autocomplete-item>
JS constructor
new Coral.Autocomplete.Item();

See:

public Banner: * source

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

A Banner component

Example:

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

See:

public Button: * source

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

A Button component containing text and/or an icon.

Example:

Markup
<button is="coral-button"></button>
JS constructor
new Coral.Button();

See:

public ButtonGroup: * source

import {ButtonGroup} from '@adobe/coral-spectrum'

A ButtonGroup component that can be used as a selection form field.

Example:

Markup
<coral-buttongroup></coral-buttongroup>
JS constructor
new Coral.ButtonGroup();

See:

public ButtonList: * source

import {ButtonList} from '@adobe/coral-spectrum'

A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis.

Example:

Markup
<coral-buttonlist></coral-buttonlist>
JS constructor
new Coral.ButtonList();

See:

public ButtonListItem: * source

import {ButtonList} from '@adobe/coral-spectrum'

An ButtonList item component

Example:

Markup
<coral-buttonlist-item></coral-buttonlist-item>
JS constructor
new Coral.ButtonList.Item();

See:

public Calendar: * source

import {Calendar} from '@adobe/coral-spectrum'

A Calendar component that can be used as a date selection form field. Leverages momentJS if loaded on the page.

Example:

Markup
<coral-calendar></coral-calendar>
JS constructor
new Coral.Calendar();

See:

public Card: * source

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

A Card component to display content in different variations.

Example:

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

See:

public CardProperty: * source

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

A Card property component

Example:

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

See:

public CardPropertyList: * source

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

The Card PropertyList component

Example:

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

See:

public CharacterCount: * source

import {CharacterCount} from '@adobe/coral-spectrum'

A CharacterCount component that indicates the remaining characters in a Textfield or Textarea.

Example:

Markup
<coral-charactercount></coral-charactercount>
JS constructor
new Coral.CharacterCount();

See:

public Checkbox: * source

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

A Checkbox component to be used as a form field.

Example:

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

See:

public CheckboxGroup: * source

import {CheckboxGroup} from '@adobe/coral-spectrum'

A CheckboxGroup component to group checkbox fields

Example:

Markup
<coral-checkboxgroup></coral-checkboxgroup>
JS constructor
new Coral.CheckboxGroup();

See:

public Clock: * source

import {Clock} from '@adobe/coral-spectrum'

A Clock component that can be used as a time selection form field. Leverages momentJS if loaded on the page.

Example:

Markup
<coral-clock></coral-clock>
JS constructor
new Coral.Clock();

See:

public CoachMark: * source

import {CoachMark} from '@adobe/coral-spectrum'

A coach mark component to highlight UI elements on the page.

Example:

Markup
<coral-coachmark></coral-coachmark>
JS constructor
new Coral.CoachMark();

See:

public ColorFormats: {"HSL": string, "HSV": string, "RGB": string, "PRGB": string, "HEX": string, "HEX3": string, "HEX4": string, "HEX8": string, "NAME": string} source

import {ColorFormats} from '@adobe/coral-spectrum'

Copyright 2021 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

public ColorInput: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput component than can be used as a form field to select from a list of color options.

Example:

Markup
<coral-colorinput></coral-colorinput>
JS constructor
new Coral.ColorInput();

See:

public ColorInputColorProperties: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput Color properties component

Example:

Markup
<coral-colorinput-colorproperties></coral-colorinput-colorproperties>
JS constructor
new Coral.ColorInput.ColorProperties();

See:

public ColorInputItem: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput Item component

Example:

Markup
<coral-colorinput-item></coral-colorinput-item>
JS constructor
new Coral.ColorInput.Item();

See:

public ColorInputSlider: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput Slider component

Example:

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

See:

public ColorInputSwatch: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput Swatch component

Example:

Markup
<coral-colorinput-swatch></coral-colorinput-swatch>
JS constructor
new Coral.ColorInput.Swatch();

See:

public ColorInputSwatches: * source

import {ColorInput} from '@adobe/coral-spectrum'

A ColorInput Swatches component

Example:

Markup
<coral-colorinput-swatches></coral-colorinput-swatches>
JS constructor
new Coral.ColorInput.Swatches();

See:

public ColumnView: * source

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

A ColumnView component to display and allow users to browse and select items in a dynamic tree structure (e.g. a filesystem or multi-level navigation).

Example:

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

See:

public ColumnViewColumn: * source

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

A ColumnView Column component

Example:

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

See:

public ColumnViewItem: * source

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

A ColumnView Item component

Example:

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

See:

public ColumnViewPreview: * source

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

A ColumnView Preview component

Example:

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

See:

public CycleButton: * source

import {CycleButton} from '@adobe/coral-spectrum'

A CycleButton component is a simple multi-state toggle button that toggles between the possible items below a certain threshold, and shows them in a popover selector when above.

Example:

Markup
<coral-cyclebutton></coral-cyclebutton>
JS constructor
new Coral.CycleButton();

See:

public CycleButtonAction: * source

import {CycleButton} from '@adobe/coral-spectrum'

A CycleButton Action component

Example:

Markup
<coral-cyclebutton-action></coral-cyclebutton-action>
JS constructor
new Coral.CycleButton.Action();

See:

public CycleButtonItem: * source

import {CycleButton} from '@adobe/coral-spectrum'

A CycleButton Item component

Example:

Markup
<coral-cyclebutton-item></coral-cyclebutton-item>
JS constructor
new Coral.CycleButton.Item();

See:

public Datepicker: * source

import {Datepicker} from '@adobe/coral-spectrum'

A Datepicker component that can be used as a date and time selection form field. Leverages momentJS if loaded on the page.

Example:

Markup
<coral-datepicker></coral-datepicker>
JS constructor
new Coral.Datepicker();

See:

public Dialog: * source

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

A Dialog component that supports various use cases with custom content. The Dialog can be given a size by using the special attribute [coral-dialog-size] as selector.

Example:

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

See:

public Drawer: * source

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

A Drawer component to display content that can be opened and closed with a sliding animation.

Example:

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

See:

public FileUpload: * source

import {FileUpload} from '@adobe/coral-spectrum'

A FileUpload component that manages the upload process of multiple files. Child elements of FileUpload can be given special attributes to enable functionality:

  • [coral-fileupload-select]. Click to choose file(s), replacing existing files.
  • [coral-fileupload-dropzone]. Drag and drop files to choose file(s), replacing existing files.
  • [coral-fileupload-clear]. Click to remove all files from the queue.
  • [coral-fileupload-submit]. Click to start uploading.
  • [coral-fileupload-abort]. Click to abort all uploads.
  • [coral-fileupload-abortfile="filename.txt"]. Click to abort a specific file, leaving it in the queue.
  • [coral-fileupload-removefile="filename.txt"]. Click to remove a specific file from the queue.
  • [coral-fileupload-uploadfile="filename.txt"]. Click to start uploading a specific file.

Example:

Markup
<coral-fileupload></coral-fileupload>
JS constructor
new Coral.FileUpload();

See:

public Icon: * source

import {Icon} from '@adobe/coral-spectrum'

An Icon component. Icon ships with a set of SVG icons.

Example:

Markup
<coral-icon></coral-icon>
JS constructor
new Coral.Icon();

See:

public List: * source

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

A List component that supports multi-line text, icons, and text wrapping with ellipsis.

Example:

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

See:

public ListDivider: * source

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

The List divider

Example:

Markup
<coral-list-divider></coral-list-divider>
JS constructor
new Coral.List.Divider();

See:

public ListItem: * source

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

A List item component

Example:

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

See:

public Masonry: * source

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

A Masonry component that allows to lay out items in a masonry grid.

Example:

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

See:

public MasonryItem: * source

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

A Masonry Item component

Example:

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

See:

public Multifield: * source

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

A Multifield component that enables adding, reordering, and removing multiple instances of a component. Multifield partially supports the template element in IE 11. If adding/removing items in the template is required, template.content should be used. Child elements can be given a special attribute to enable functionality:

  • [coral-multifield-add]. Click to add an item.

Example:

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

See:

public MultifieldItem: * source

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

A Multifield item component. It can have a pre-filled content different from the Multifield template but added items will always be rendered based on the template.

Example:

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

See:

public NumberInput: * source

import {NumberInput} from '@adobe/coral-spectrum'

A NumberInput component is a numeric control form field. It follows the ARIA specification for spinbutton. This means the following keys are valid for interacting with it: up, down, left, right, pageup, pagedown, home, end and the Mouse Wheel.

Example:

Markup
<coral-numberinput></coral-numberinput>
JS constructor
new Coral.NumberInput();

See:

public Overlay: * source

import {Overlay} from '@adobe/coral-spectrum'

public Panel: * source

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

A Panel component

Example:

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

See:

public PanelStack: * source

import {PanelStack} from '@adobe/coral-spectrum'

A PanelStack component holding a collection of panels. It wraps content, keeping only the selected panel in view.

Example:

Markup
<coral-panelstack></coral-panelstack>
JS constructor
new Coral.PanelStack();

See:

public Popover: * source

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

A Popover component for small overlay content.

Example:

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

See:

public PopoverSeparator: * source

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

The Popover separator

Example:

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

See:

public Progress: * source

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

A Progress component to indicate progress of processes.

Example:

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

See:

public QuickActions: * source

import {QuickActions} from '@adobe/coral-spectrum'

A QuickActions component is an overlay component that reveals actions when interacting with a container. Hovering the target will display the QuickActions. They can also be launched by pressing the shift + F10 key combination when the target is focused.

Example:

Markup
<coral-quickactions></coral-quickactions>
JS constructor
new Coral.QuickActions();

See:

public QuickActionsItem: * source

import {QuickActions} from '@adobe/coral-spectrum'

A QuickActions item component

Example:

Markup
<coral-quickactions-item></coral-quickactions-item>
JS constructor
new Coral.QuickActions.Item();

See:

public Radio: * source

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

A Radio component to be used as a form field.

Example:

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

See:

public RadioGroup: * source

import {RadioGroup} from '@adobe/coral-spectrum'

A RadioGroup component to group radio fields

Example:

Markup
<coral-radiogroup></coral-radiogroup>
JS constructor
new Coral.RadioGroup();

See:

public RangedSlider: * source

import {RangedSlider} from '@adobe/coral-spectrum'

A Ranged Slider

Example:

Markup
<coral-rangedslider></coral-rangedslider>
JS constructor
new Coral.RangedSlider();

See:

public SPECTRUM_CSS_ICONS: string source

import {SPECTRUM_CSS_ICONS} from '@adobe/coral-spectrum'

public SPECTRUM_ICONS: string source

import {SPECTRUM_ICONS} from '@adobe/coral-spectrum'

Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

public SPECTRUM_ICONS_COLOR: string source

import {SPECTRUM_ICONS_COLOR} from '@adobe/coral-spectrum'
import {Search} from '@adobe/coral-spectrum'

A Search component is a search styled form field.

Example:

Markup
<coral-search></coral-search>
JS constructor
new Coral.Search();

See:

public Select: * source

import {Select} from '@adobe/coral-spectrum'

A Select component is a form field that allows users to select from a list of options. If this component is shown on a mobile device, it will show a native select list, instead of the select list styled via Coral Spectrum.

Example:

Markup
<coral-select></coral-select>
JS constructor
new Coral.Select();

See:

public SelectItem: * source

import {Select} from '@adobe/coral-spectrum'

A Select item component

Example:

Markup
<coral-select-item></coral-select-item>
JS constructor
new Coral.Select.Item();

See:

public SelectList: * source

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

A SelectList component is a selectable list of items.

Example:

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

See:

public SelectListGroup: * source

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

A SelectList group component

Example:

Markup
<coral-selectlist-group></coral-selectlist-group>
JS constructor
new Coral.SelectList.Group();

See:

public SelectListItem: * source

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

A SelectList item component

Example:

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

See:

public SideNav: * source

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

A Side Navigation component to navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.

Example:

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

See:

public SideNavItem: * source

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

A SideNav Item component.

Example:

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

See:

public SideNavLevel: * source

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

A SideNav Level component

Example:

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

See:

public Slider: * source

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

public SliderItem: * source

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

The Slider item

Example:

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

See:

public SplitButton: * source

import {SplitButton} from '@adobe/coral-spectrum'

A Split Button component composed of an action and a trigger AnchorButton or Button. These elements should be marked with following attributes:

  • [coral-splitbutton-action] for the main action button.
  • [coral-splitbutton-trigger] for the trigger button.

Example:

Markup
<coral-splitbutton></coral-splitbutton>
JS constructor
new Coral.SplitButton();

See:

public Status: * source

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

A Status component to describe the condition of another entity. They can be used to convey semantic meaning such as statuses and categories.

Example:

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

See:

public Step: * source

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

A Step component

Example:

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

See:

public StepList: * source

import {StepList} from '@adobe/coral-spectrum'

A StepList component that holds a collection of steps.

Example:

Markup
<coral-steplist></coral-steplist>
JS constructor
new Coral.StepList();

See:

public Switch: * source

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

A Switch component is a toggle form field similar to a Checkbox component.

Example:

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

See:

public Tab: * source

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

A Tab component

Example:

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

See:

public TabView: * source

import {TabView} from '@adobe/coral-spectrum'

A TabView component is the wrapping container used to create the typical Tabbed pattern. This is intended to be used with a TabList and PanelStack.

Example:

Markup
<coral-tabview></coral-tabview>
JS constructor
new Coral.TabView();

See:

public Table: * source

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

A Table component is a container component to display and manipulate data in two dimensions. To define table actions on specific elements, handles can be used. A handle is given a special attribute :

  • [coral-table-select]. Select/unselect all table items.
  • [coral-table-rowselect]. Select/unselect the table item.
  • [coral-table-roworder]. Drag to order the table item.
  • [coral-table-rowlock]. Lock/unlock the table item.

Example:

Markup
<table is="coral-table"></table>
JS constructor
new Coral.Table();

See:

public TableBody: * source

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

A Table body component

Example:

Markup
<tbody is="coral-table-body"></tbody>
JS constructor
new Coral.Table.Body();

See:

public TableCell: * source

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

A Table cell component

Example:

Markup
<td is="coral-table-cell"></td>
JS constructor
new Coral.Table.Cell();

See:

public TableColumn: * source

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

A Table column component

Example:

Markup
<col is="coral-table-column"></col>
JS constructor
new Coral.Table.Column();

See:

public TableFoot: * source

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

A Table foot component

Example:

Markup
<tfoot is="coral-table-foot"></tfoot>
JS constructor
new Coral.Table.Foot();

See:

public TableHead: * source

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

A Table head component

Example:

Markup
<thead is="coral-table-head"></thead>
JS constructor
new Coral.Table.Head();

See:

public TableHeaderCell: * source

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

A Table header cell component

Example:

Markup
<th is="coral-table-headercell"></th>
JS constructor
new Coral.Table.HeaderCell();

See:

public TableRow: * source

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

A Table row component

Example:

Markup
<tr is="coral-table-row"></tr>
JS constructor
new Coral.Table.Row();

See:

public Tag: * source

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

A Tag component

Example:

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

See:

public TagList: * source

import {TagList} from '@adobe/coral-spectrum'

A TagList component is a form field container to manipulate tags.

Example:

Markup
<coral-taglist></coral-taglist>
JS constructor
new Coral.TagList();

See:

public Textarea: * source

import {Textarea} from '@adobe/coral-spectrum'

A Textarea component is the default multi-line text form field.

Example:

Markup
<textarea is="coral-textarea"></textarea>
JS constructor
new Coral.Textarea();

See:

public Textfield: * source

import {Textfield} from '@adobe/coral-spectrum'

A Textfield component is the default single line text form field.

Example:

Markup
<input is="coral-textfield"></input>
JS constructor
new Coral.Textfield();

See:

public Toast: * source

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

Toasts display brief temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Example:

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

See:

public Tooltip: * source

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

A Tooltip component that can be attached to any element and may be displayed immediately or on hovering the target element.

Example:

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

See:

public Tree: * source

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

A Tree component is a container component to display collapsible content. Tree items don't expand by default. It's the developer's responsibility to handle it by listening to the coral-collection:add and coral-collection:remove events.

Example:

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

See:

public TreeItem: * source

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

A Tree item component

Example:

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

See:

public Wait: * source

import {Wait} from '@adobe/coral-spectrum'

A Wait component to be used to indicate a process that is in-progress for an indefinite amount of time. When the time is known, Progress should be used instead.

Example:

Markup
<coral-wait></coral-wait>
JS constructor
new Coral.Wait();

See:

public WizardView: * source

import {WizardView} from '@adobe/coral-spectrum'

A WizardView component is the wrapping container used to create the typical Wizard pattern. This is intended to be used with a StepList and a PanelStack.

Example:

Markup
<coral-wizardview></coral-wizardview>
JS constructor
new Coral.WizardView();

See:

public colorUtil: ColorUtil source

import {colorUtil} from '@adobe/coral-spectrum'

public commons: Commons source

import {commons} from '@adobe/coral-spectrum'

public events: Events source

import {events} from '@adobe/coral-spectrum'

public i18n: I18nProvider source

import {i18n} from '@adobe/coral-spectrum'

An i18n service.

public keys: Keys source

import {keys} from '@adobe/coral-spectrum'

A key listener for global hotkeys is exposed for document eventing handling.

public strings: Object source

import {strings} from '@adobe/coral-spectrum'

Used to store i18n strings.

Properties:

NameTypeAttributeDescription
strings.generic String

public tracking: Tracking source

import {tracking} from '@adobe/coral-spectrum'

public transform: Transformation source

import {transform} from '@adobe/coral-spectrum'

public validate: Validation source

import {validate} from '@adobe/coral-spectrum'