Section header

A section header, nol-section-header: the label of a group of rows in a list or tree, in the label size at the emphasis weight, with no fill or line. Groups are separated by space: every header that is not the first element in its container stands 0.75rem below what comes before it. It has the heading role. A collapsible header holds one button, the whole header, whose caret after the label points down while the group is open and turns to the end while it is closed; the owner holds the open state and shows or removes the rows.

Examples

Loading…

States

Loading…

API

Selector nol-section-header

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`label`	`string`	Required	The header's text, its required `label` input.
`level`	`number`	`SectionHeaderResources.sectionHeaderLevel`	The heading level screen readers announce, its `level` input; 3 when not bound.
`icon`	`string \| null`	`null`	The Material Symbols name of an icon shown before the label, such as `chat` for a list of chats, its `icon` input: at the theme's icon size in `icon-color`, where a top-level row's icon is in a tree without branches, centered on the label's first line, with the label 0.5rem after it and hidden from screen readers, so the label alone names the heading. No icon when not bound, null or empty.
`collapsible`	`boolean`	`false`	Whether the person can fold the group, its `collapsible` input: the header then holds one button, the whole header, with the icon and the label where they are without it and a caret 0.25rem after the label at the icon size in `icon-color`, centered on the label's first line and hidden from screen readers. The button takes the hover fill and exposes the open state. False when not bound.
`uppercase`	`boolean`	`false`	Whether the label shows as an uppercase group heading, its `uppercase` input: in capitals at `--nol-text-small`, the emphasis weight, the `text` color rather than `text-strong`, and `--nol-letter-spacing-caps`, with the icon and the caret as they are and the header's height unchanged. Screen readers still read the label as given. False when not bound.
`controls`	`string \| null`	`null`	The id of the element holding the group's rows, which a collapsible header's button controls, its `controls` input; none when not bound.
`expanded`	`boolean`	`true`	Whether a collapsible header's group is open, its two-way `expanded` model; true when not bound. Pressing the button, or Enter or Space on it, flips it; the caret points down while it is true and turns a quarter to the end, right or in a right-to-left layout left, while it is false. Two-way: bind it as `[(expanded)]`.

Accessibility

Key	Action
`Enter`	On a collapsible header, folds its group, or opens it again.
`Space`	On a collapsible header, folds its group, or opens it again.

It has the heading role, at level 3 unless its owner gives another level.

Its icon is hidden from assistive technology, so the label alone names the heading; an uppercase header only looks so, and is read as its owner writes it.

A collapsible header holds one button, exposing whether its group is open and, when its owner names it, the region it controls; its caret is hidden from assistive technology.

A header that isn't collapsible takes no focus. The owner holds the open state and shows or removes the rows.

Specification

Loading…