enact logoEnact
Edit on GitHub

moonstone/Heading

Moonstone styled labeled Heading components and behaviors

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

Members

HeadingComponent

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

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

Usage:

<Heading
  spacing="medium"
>
  Related Settings
</Heading>
<CheckboxItem>A Setting</CheckboxItem>
<CheckboxItem>A Second Setting</CheckboxItem>
import Heading from '@enact/moonstone/Heading';
Properties
marqueeOn
'hover''render'

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'

HeadingBaseComponent

A labeled Heading component.

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

import {HeadingBase} from '@enact/moonstone/Heading';
Properties
showLine
Boolean

Adds a horizontal-rule (line) under the component

spacing
'auto''large''medium''small''none'

The size of the spacing around the Heading.

Allowed values include:

  • 'auto' - Value is based on the size prop for automatic usage.

  • 'large' - Specifically assign the 'large' spacing.

  • 'medium' - Specifically assign the 'medium' spacing.

  • 'small' - Specifically assign the 'small' spacing.

  • 'none' - No spacing at all. Neighboring elements will directly touch the Heading.

Default: 'small'

HeadingDecoratorHigher-Order Component

Applies Moonstone specific behaviors to HeadingBase.

import {HeadingDecorator} from '@enact/moonstone/Heading';
ArrayBooleanFunctionModuleNumberObjectString