Heading
Heading displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with TableOfContents.Key features:
- Semantic levels: Choose from h1 through h6 for proper document structure and accessibility
- Text overflow control: Automatic ellipses and line limiting for long headings
- Anchor generation: Optional hover anchors for deep linking to specific sections
<App>
<Heading level="h1" value="Heading Level 1" />
<Text>Text following H1</Text>
<Heading level="h2" value="Heading Level 2" />
<Text>Text following H2</Text>
<Heading level="h3" value="Heading Level 3" />
<Text>Text following H3</Text>
<Heading level="h4" value="Heading Level 4" />
<Text>Text following H4</Text>
<Heading level="h5" value="Heading Level 5" />
<Text>Text following H5</Text>
<Heading level="h6" value="Heading Level 6" />
<Text>Text following H6</Text>
</App>Example: Headings with levels
<App>
<Heading level="h1" value="Heading Level 1" />
<Text>Text following H1</Text>
<Heading level="h2" value="Heading Level 2" />
<Text>Text following H2</Text>
<Heading level="h3" value="Heading Level 3" />
<Text>Text following H3</Text>
<Heading level="h4" value="Heading Level 4" />
<Text>Text following H4</Text>
<Heading level="h5" value="Heading Level 5" />
<Text>Text following H5</Text>
<Heading level="h6" value="Heading Level 6" />
<Text>Text following H6</Text>
</App>Properties
ellipses (default: true)
This property indicates whether ellipses should be displayed (
true) when the heading text is cropped or not (false).<App>
<VStack width="200px">
<H3
backgroundColor="cyan"
maxLines="1"
ellipses="false">
Though this long text does is about to crop!
</H3>
<H3
backgroundColor="cyan"
maxLines="1">
Though this long text does is about to crop!
</H3>
</VStack>
</App>Example: ellipses
<App>
<VStack width="200px">
<H3
backgroundColor="cyan"
maxLines="1"
ellipses="false">
Though this long text does is about to crop!
</H3>
<H3
backgroundColor="cyan"
maxLines="1">
Though this long text does is about to crop!
</H3>
</VStack>
</App>level (default: "h1")
This property sets the visual significance (level) of the heading.
Available values:
h1 (default), h2, h3, h4, h5, h6| Value | Description |
|---|---|
h1 | (default) Equivalent to the <h1 /> HTML element |
h2 | Equivalent to the <h2 /> HTML element |
h3 | Equivalent to the <h3 /> HTML element |
h4 | Equivalent to the <h4 /> HTML element |
h5 | Equivalent to the <h5 /> HTML element |
h6 | Equivalent to the <h6 /> HTML element |
For a visual example, see the component description.
maxLines
This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines.
<App>
<H2
maxWidth="160px"
backgroundColor="cyan"
value="A long heading text that will likely overflow" maxLines="2" />
</App>Example: maxLines
<App>
<H2
maxWidth="160px"
backgroundColor="cyan"
value="A long heading text that will likely overflow" maxLines="2" />
</App>omitFromToc (default: false)
If true, this heading will be excluded from the table of contents.
preserveLinebreaks (default: false)
This property indicates whether linebreaks should be preserved when displaying text.
<App>
<HStack>
<H3
width="200px"
backgroundColor="cyan"
preserveLinebreaks="true"
value="(preserve) This long text
with several line breaks
does not fit into a viewport with a 200-pixel width." />
<H3
width="200px"
backgroundColor="cyan"
value="(do not preserve) This long text
with several line breaks
does not fit into a viewport with a 200-pixel width." />
</HStack>
</App>You can observe the effect of using
preserveLinebreaks:Example: preserveLinebreaks
<App>
<HStack>
<H3
width="200px"
backgroundColor="cyan"
preserveLinebreaks="true"
value="(preserve) This long text
with several line breaks
does not fit into a viewport with a 200-pixel width." />
<H3
width="200px"
backgroundColor="cyan"
value="(do not preserve) This long text
with several line breaks
does not fit into a viewport with a 200-pixel width." />
</HStack>
</App>You can observe the effect of using
preserveLinebreaks:Remember to use thevalueproperty ofHeading. Linebreaks are converted to spaces when nesting the text in theHeadingcomponent.
showAnchor
This property indicates whether an anchor link should be displayed next to the heading. If set to
true, an anchor link will be displayed on hover next to the heading.If this property is not set, the engine checks if
showHeadingAnchors flag is turned on in the global configuration (in the appGlobals configuration object) and displays the heading anchor accordingly.value
This property determines the text displayed in the heading.
Heading also accepts nested text instead of specifying the value. If both value and a nested text are used, the value will be displayed.<App>
<Heading value="This is level 3 (value)" level="h3" />
<Heading level="h3">This is level 3 (child)</Heading>
<Heading value="Value" level="h3"><Icon name="trash" /></Heading>
</App>Example: value
<App>
<Heading value="This is level 3 (value)" level="h3" />
<Heading level="h3">This is level 3 (child)</Heading>
<Heading value="Value" level="h3"><Icon name="trash" /></Heading>
</App>Events
This component does not have any events.
Exposed Methods
scrollIntoView
Scrolls the heading into view.
Signature:
scrollIntoView()