ui/Heading

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

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

Members

HeadingComponent

A labeled Heading component.

import Heading from '@enact/ui/Heading';
Properties
children
Node

The text for the label of the Heading.

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 fourth.

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'
ArrayBooleanFunctionModuleNumberObjectString