ui/Heading

A component for instantiating a section of content with a title.

Loading Live Preview

Import Usage

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

Members

Heading   Component

A labeled Heading component.

Import Usage

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

Extends: ui/Headingui/Heading.HeadingBase
Wrapped with: ui/Headingui/Heading.HeadingDecorator

Properties

children

Node

The text for the label of the Heading.

---

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Headingui/Heading.Heading, the ref prop is forwarded to this component as componentRef.

---

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"

---

size

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

Set the size of this component.

• 'title' and 'subtitle' are generally considered to be used only once on a given screen.

• 'large', 'medium', 'small', and 'tiny' are typically used as section headings for content on a screen, starting with 'large' for the first tier of information followed by 'medium' for the next, and so forth.

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

---

spacing

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

The size of the spacing around the Heading.

These have no built-in measurements, as they are intended to be defined by the theme consuming this UI element. The values correlate with customizable classes made available by this component's css prop.

Allowed values include:

• 'auto' (default) - Lets this value be 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: 'auto'

HeadingBase   Component

A labeled Heading component.

Import Usage

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

HeadingDecorator   Higher-Order Component

A higher-order component that adds behavior to ui/Headingui/Heading.HeadingBase.

Import Usage

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

Includes: ui/ForwardRefui/ForwardRef.ForwardRef