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

Masonry

Expression Extends:

class Masonry extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

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

See:

Example:

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

Static Member Summary

Static Public Members
public static

Returns Masonry layouts.

public static

Returns Masonry selection mode options.

Static Method Summary

Static Public Methods
public static

registerLayout(name: String, Layout: Layout)

Registers a layout with the given name.

Member Summary

Public Members
public

Attribute to enable/disable auto aria grid role assignment.

public

Specifies aria-label value

  • reflected

public

Specifies aria-labelledby value

  • reflected

public

Allows to interact with the masonry items.

public

The layout name for this masonry.

public

Allows to interact with the masonry layout instance.

public

Whether or not it is possible to order items with drag & drop.

public

The first selected item or null if no item is selected.

public

An array of all selected items.

public

Selection mode of Masonry

  • MasonrySelectionModeEnum.NONE by default.

public

The spacing between the items and the masonry container in pixel.

Static Public Members

public static layouts: MasonryLayoutsEnum: * source

Returns Masonry layouts.

public static selectionMode: MasonrySelectionModeEnum: * source

Returns Masonry selection mode options.

Static Public Methods

public static registerLayout(name: String, Layout: Layout) source

Registers a layout with the given name. The name can then be set at Coral.Masonry.layout to render a masonry with the this registered layout.

Params:

NameTypeAttributeDescription
name String

of the layout

Layout Layout

class which extends Coral.Masonry.Layout

Public Members

public ariaGrid: String source

Attribute to enable/disable auto aria grid role assignment. Value must be one of MasonryAriaGridEnum. Setting this property to MasonryAriaGridEnum.ON will do following to enable support for accessibility:

  • Preserve current role attribute of the parent element of Masonry, and set new role as grid.
  • Preserve current role attribute of the Masonry, and set new role as row.
  • Set role attribute of all child MasonryItem to gridcell.

Setting the property to MasonryAriaGridEnum.OFF will do following:

  • Restore preserved (if any) role attribute of the parent element of Masonry.
  • Restore preserved role attribute of the Masonry.
  • Remove role attribute of all child MasonryItem.

Setting the attribute to other than allowed values will fallback to MasonryAriaGridEnum.OFF.

  • MasonryAriaGridEnum.OFF by default.
  • reflected

public ariaLabel: String source

Specifies aria-label value

  • reflected

public ariaLabelledby: String source

Specifies aria-labelledby value

  • reflected

public items: SelectableCollection source

Allows to interact with the masonry items.

  • read-only

public layout: String source

The layout name for this masonry. Must be one of Coral.Masonry.layouts. See MasonryLayoutsEnum.

  • MasonryLayoutsEnum.FIXED_CENTERED by default.
  • reflected

public layoutInstance: MasonryLayout source

Allows to interact with the masonry layout instance.

  • read-only

public orderable: Boolean source

Whether or not it is possible to order items with drag & drop.

  • false by default.

public selectedItem: MasonryItem source

The first selected item or null if no item is selected.

  • read-only

public selectedItems: Array<MasonryItem> source

An array of all selected items.

  • read-only

public selectionMode: String source

Selection mode of Masonry

  • MasonrySelectionModeEnum.NONE by default.
  • reflected

public spacing: Number source

The spacing between the items and the masonry container in pixel. If this property is not set, then it falls back to the CSS padding of the masonry and margin of the items.

  • null by default.