moonstone/Divider

Moonstone styled labeled divider components and behaviors

import Divider from '@enact/moonstone/Divider';

Members

DividerComponent

A labeled divider component, ready to use in Moonstone applications.

Divider may be used as a header to group related components.

Usage:

<Divider
  casing="preserve"
  spacing="medium"
>
  Related Settings
</Divider>
<CheckboxItem>A Setting</CheckboxItem>
<CheckboxItem>A Second Setting</CheckboxItem>
import Divider from '@enact/moonstone/Divider';
Properties
casing
String

The casing mode applied to the children text.

See: i18n/Uppercase#casing
Default: 'word'
marqueeOn
String

Marquee animation trigger.

Allowed values include:

  • 'hover' - Marquee begins when the pointer enters the component

  • 'render' - Marquee begins when the component is rendered

See: moonstone/Marquee.Marquee
Default: 'render'

DividerBaseComponent

A labeled divider component.

This component is most often not used directly but may be composed within another component as it is within Divider.

import {DividerBase} from '@enact/moonstone/Divider';
Properties
children
Node

The text for the label of the divider.

A divider with no children (text content) will render simply as a horizontal line, with even spacing above and below.

spacing
String

The size of the spacing around the divider.

Allowed values include:

  • 'normal' (default) - slightly larger than the standard spotlight spacing.

  • 'small' - same size as spotlight spacing.

  • 'medium' - 2x spotlight.

  • 'large' - 3x spotlight.

  • 'none' - no spacing at all. Neighboring elements will directly touch the divider.

Note: Spacing is separate from margin with regard to margin-top. It ensures a consistent distance from the bottom horizontal line. It's safe to use margin-top to add additional spacing above the divider.

Default: 'normal'

DividerDecoratorHigher-Order Component

Applies Moonstone specific behaviors to DividerBase.

import {DividerDecorator} from '@enact/moonstone/Divider';
ArrayBooleanFunctionModuleNumberObjectString