limestone/Heading

Limestone styled labeled Heading components and behaviors

Loading Live Preview

Import Usage

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

Members

Heading   Component

A labeled Heading component, ready to use in Limestone 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 Usage

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

Extends: limestone/Headinglimestone/Heading.HeadingBase
Wrapped with: limestone/Headinglimestone/Heading.HeadingDecorator

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

Default: 'render'

See: limestone/Marqueelimestone/Marquee.Marquee

HeadingBase   Component

A labeled Heading component.

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

Import Usage

import {HeadingBase} from '@enact/limestone/Heading';

Properties

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• heading - The root component class

• title - Applied when size is set to "title"

• subtitle - Applied when size is set to "subtitle"

• large - Applied when size is set to "large"

• medium - Applied when size is set to "medium"

• small - Applied when size is set to "small"

• tiny - Applied when size is set to "tiny"

• largeSpacing - Applied when spacing is set to "large"

• mediumSpacing - Applied when spacing is set to "medium"

• smallSpacing - Applied when spacing is set to "small"

• noneSpacing - Applied when spacing is set to "none"

---

showLine

Boolean

Adds a horizontal-rule (line) under the component

---

size

'large''medium''small''tiny''title''subtitle'

Set the size of the component.

If the spacing prop is not set (defaulting to "auto"), these values automatically set the spacing to the correlated names.

Default: 'tiny'

---

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: 'none'

HeadingDecorator   Higher-Order Component

Applies Limestone specific behaviors to limestone/Headinglimestone/Heading.HeadingBase.

Import Usage

import {HeadingDecorator} from '@enact/limestone/Heading';

Includes: limestone/Marqueelimestone/Marquee.MarqueeDecorator
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable