Variable

Static Public Summary
public	Accordion: * An Accordion component consisting of multiple collapsible items.
public	AccordionItem: * A Accordion item component
public	ActionBar: * An ActionBar component containing arbitrary items.
public	ActionBarContainer: * this variable was deprecated. An ActionBar container component
public	ActionBarItem: * An ActionBar item component
public	ActionBarPrimary: * An ActionBar primary component
public	ActionBarSecondary: * 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	AnchorButton: * 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	AnchorList: * An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis.
public	AnchorListItem: * An AnchorList item component
public	Autocomplete: * An Autocomplete component that allows users to search and select from a list of options.
public	AutocompleteItem: * The Autocomplete Item
public	Banner: * A Banner component
public	Button: * A Button component containing text and/or an icon.
public	ButtonGroup: * A ButtonGroup component that can be used as a selection form field.
public	ButtonList: * A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis.
public	ButtonListItem: * An ButtonList item component
public	Calendar: * 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	CardProperty: * A Card property component
public	CardPropertyList: * The Card PropertyList component
public	CharacterCount: * A CharacterCount component that indicates the remaining characters in a Textfield or Textarea.
public	Checkbox: * A Checkbox component to be used as a form field.
public	CheckboxGroup: * A CheckboxGroup component to group checkbox fields
public	Clock: * A Clock component that can be used as a time selection form field.
public	CoachMark: * 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	ColorInput: * A ColorInput component than can be used as a form field to select from a list of color options.
public	ColorInputColorProperties: * A ColorInput Color properties component
public	ColorInputItem: * A ColorInput Item component
public	ColorInputSlider: * A ColorInput Slider component
public	ColorInputSwatch: * A ColorInput Swatch component
public	ColorInputSwatches: * A ColorInput Swatches component
public	ColumnView: * A ColumnView component to display and allow users to browse and select items in a dynamic tree structure (e.g.
public	ColumnViewColumn: * A ColumnView Column component
public	ColumnViewItem: * A ColumnView Item component
public	ColumnViewPreview: * A ColumnView Preview component
public	CycleButton: * 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	CycleButtonAction: * A CycleButton Action component
public	CycleButtonItem: * A CycleButton Item component
public	Datepicker: * 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	FileUpload: * 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	ListDivider: * The List divider
public	ListItem: * A List item component
public	Masonry: * A Masonry component that allows to lay out items in a masonry grid.
public	MasonryItem: * A Masonry Item component
public	Multifield: * A Multifield component that enables adding, reordering, and removing multiple instances of a component.
public	MultifieldItem: * A Multifield item component.
public	NumberInput: * A NumberInput component is a numeric control form field.
public	Overlay: *
public	Panel: * A Panel component
public	PanelStack: * A PanelStack component holding a collection of panels.
public	Popover: * A Popover component for small overlay content.
public	PopoverSeparator: * The Popover separator
public	Progress: * A Progress component to indicate progress of processes.
public	QuickActions: * A QuickActions component is an overlay component that reveals actions when interacting with a container.
public	QuickActionsItem: * A QuickActions item component
public	Radio: * A Radio component to be used as a form field.
public	RadioGroup: * A RadioGroup component to group radio fields
public	RangedSlider: * A Ranged Slider
public	SPECTRUM_CSS_ICONS: string
public	SPECTRUM_ICONS: string Copyright 2020 Adobe.
public	SPECTRUM_ICONS_COLOR: string
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	SelectItem: * A Select item component
public	SelectList: * A SelectList component is a selectable list of items.
public	SelectListGroup: * A SelectList group component
public	SelectListItem: * A SelectList item component
public	SideNav: * A Side Navigation component to navigate the entire content of a product or a section.
public	SideNavItem: * A SideNav Item component.
public	SideNavLevel: * A SideNav Level component
public	Slider: *
public	SliderItem: * The Slider item
public	SplitButton: * 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	StepList: * 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	TableBody: * A Table body component
public	TableCell: * A Table cell component
public	TableColumn: * A Table column component
public	TableFoot: * A Table foot component
public	TableHead: * A Table head component
public	TableHeaderCell: * A Table header cell component
public	TableRow: * A Table row component
public	Tag: * A Tag component
public	TagList: * A TagList component is a form field container to manipulate tags.
public	Textarea: * A Textarea component is the default multi-line text form field.
public	Textfield: * 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	TreeItem: * 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	WizardView: * A WizardView component is the wrapping container used to create the typical Wizard pattern.
public	colorUtil: ColorUtil
public	commons: Commons
public	events: Events
public	i18n: I18nProvider An i18n service.
public	keys: Keys A key listener for global hotkeys is exposed for document eventing handling.
public	strings: Object Used to store i18n strings.
public	tracking: Tracking
public	transform: Transformation
public	validate: Validation

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:

../examples/#accordion

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:

../examples/#accordion

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:

../examples/#actionbar

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:

../examples/#actionbar

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:

../examples/#actionbar

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:

../examples/#actionbar

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:

../examples/#actionbar

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:

../examples/#alert

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:

../examples/#anchorbutton

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:

../examples/#list

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:

../examples/#list

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:

../examples/#autocomplete

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:

../examples/#autocomplete

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

A Banner component

Example:

Markup

<coral-banner></coral-banner>

JS constructor

new Coral.Banner();

See:

../examples/#banner

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:

../examples/#button

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:

../examples/#buttongroup

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:

../examples/#list

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:

../examples/#list

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:

../examples/#calendar

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:

../examples/#card

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:

../examples/#card

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:

../examples/#card

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:

../examples/#charactercount

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:

../examples/#checkbox

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:

../examples/#checkboxgroup

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:

../examples/#clock

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:

../examples/#coachmark

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:

../examples/#colorinput

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:

../examples/#colorinput

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:

../examples/#colorinput

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:

../examples/#colorinput

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:

../examples/#colorinput

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:

../examples/#colorinput

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:

../examples/#columnview

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:

../examples/#columnview

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:

../examples/#columnview

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:

../examples/#columnview

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:

../examples/#cyclebutton

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:

../examples/#cyclebutton

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:

../examples/#cyclebutton

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:

../examples/#datepicker

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:

../examples/#dialog

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:

../examples/#drawer

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:

../examples/#fileupload

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:

../examples/#icon

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:

../examples/#list

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:

../examples/#list

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:

../examples/#list

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:

../examples/#masonry

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:

../examples/#masonry

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:

../examples/#multifield

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:

../examples/#multifield

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:

../examples/#numberinput

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:

../examples/#panelstack

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:

../examples/#panelstack

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:

../examples/#popover

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:

../examples/#popover

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:

../examples/#progress

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:

../examples/#quickactions

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:

../examples/#quickactions

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:

../examples/#radio

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:

../examples/#radiogroup

public RangedSlider: * source

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

A Ranged Slider

Example:

Markup

<coral-rangedslider></coral-rangedslider>

JS constructor

new Coral.RangedSlider();

See:

../examples/#slider

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

public SPECTRUM_ICONS_COLOR: string source

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

public Search: * source

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:

../examples/#search

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:

../examples/#select

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:

../examples/#select

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:

../examples/#list

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:

../examples/#list

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:

../examples/#list

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:

../examples/#sidenav

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:

../examples/#sidenav

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:

../examples/#sidenav

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:

../examples/#slider

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:

../examples/#splitbutton

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:

../examples/#status

public Step: * source

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

A Step component

Example:

Markup

<coral-step></coral-step>

JS constructor

new Coral.Step();

See:

../examples/#steplist

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:

../examples/#steplist

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:

../examples/#switch

public Tab: * source

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

A Tab component

Example:

Markup

<coral-tab></coral-tab>

JS constructor

new Coral.Tab();

See:

../examples/#tablist

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:

../examples/#tabview

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

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:

../examples/#table

public Tag: * source

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

A Tag component

Example:

Markup

<coral-tag></coral-tag>

JS constructor

new Coral.Tag();

See:

../examples/#taglist

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:

../examples/#taglist

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:

../examples/#textarea

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:

../examples/#textfield

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:

../examples/#toast

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:

../examples/#tooltip

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:

../examples/#tree

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:

../examples/#tree

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:

../examples/#wait

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:

../examples/#wizardview

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:

Name	Type	Attribute	Description
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'

Variable

Static Public

public Accordion: * source

Example:

See:

public AccordionItem: * source

Example:

See:

public ActionBar: * source

Example:

See:

public ActionBarContainer: * source

Example:

See:

public ActionBarItem: * source

Example:

See:

public ActionBarPrimary: * source

Example:

See:

public ActionBarSecondary: * source

Example:

See:

public Alert: * source

Example:

See:

public AnchorButton: * source

Example:

See:

public AnchorList: * source

Example:

See:

public AnchorListItem: * source

Example:

See:

public Autocomplete: * source

Example:

See:

public AutocompleteItem: * source

Example:

See:

public Banner: * source

Example:

See:

public Button: * source

Example:

See:

public ButtonGroup: * source

Example:

See:

public ButtonList: * source

Example:

See:

public ButtonListItem: * source

Example:

See:

public Calendar: * source

Example:

See:

public Card: * source

Example:

See:

public CardProperty: * source

Example:

See:

public CardPropertyList: * source

Example:

See:

public CharacterCount: * source

Example:

See:

public Checkbox: * source

Example:

See:

public CheckboxGroup: * source

Example:

See:

public Clock: * source

Example:

See: