Reference Source
import {ColumnView} from '@adobe/coral-spectrum'
public class | source

ColumnView

Expression Extends:

class ColumnView extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

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).

See:

Example:

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

Static Member Summary

Static Public Members
public static

Returns ColumnView selection options.

Member Summary

Public Members
public

Active Item that corresponds to the last item in the path.

public

Collection that holds all the columns inside the ColumnView.

public

First selected item of the ColumnView.

public

Array containing the set selected items.

public

Selection mode of the ColumnView.

public

Method Summary

Public Methods
public

setNextColumn(newColumn: HTMLElement, referenceColumn: HTMLElement, scrollToColumn: Boolean)

Sets the next column given a reference column.

Static Public Members

public static selectionMode: ColumnViewSelectionModeEnum: * source

Returns ColumnView selection options.

Public Members

public activeItem: HTMLElement source

Active Item that corresponds to the last item in the path.

  • read-only

public columns: ColumnViewCollection source

Collection that holds all the columns inside the ColumnView.

  • read-only

public selectedItem: HTMLElement source

First selected item of the ColumnView.

  • read-only

public selectedItems: Array<HTMLElement> source

Array containing the set selected items. The items will match only one column since selection across columns is not allowed.

  • read-only

public selectionMode: String source

Selection mode of the ColumnView. See ColumnViewSelectionModeEnum.

  • ColumnViewSelectionModeEnum.NONE by default.
  • reflected

public tabIndex: * source

Public Methods

public setNextColumn(newColumn: HTMLElement, referenceColumn: HTMLElement, scrollToColumn: Boolean) source

Sets the next column given a reference column. This will handle cleaning the DOM and removing any columns as required.

Params:

NameTypeAttributeDescription
newColumn HTMLElement

The new column to add to the column view. It will be placed next to the referenceColumn if provided.

referenceColumn HTMLElement

The column that will be used as a reference to place the new column. This column needs to be already inside the DOM.

scrollToColumn Boolean
  • optional
  • default: true

Whether the columnview show scroll to have the newColumn visible.

Emit:

coral-columnview:navigate