Spoiler
Shows the start of long content, such as a description or a review, with a “Show more” button for the rest. The button appears only when the content is taller than `maxHeight`.Basic
Preview
Code
The north trail climbs through pine forest for the first two kilometres, then opens onto a ridge with views over both valleys. Most walkers stop at the stone shelter, where there is water from April to October.Past the shelter the path narrows and crosses two scree slopes. Keep to the cairns: the old path below them washed out in the spring and is closed. The summit is another forty minutes from the second slope.Come down the same way, or take the forest road from the shelter, which is longer but gentler on the knees and passes the lake.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Spoiler, Text } from '@advui/core'
<Spoiler maxHeight="24">
<Text>{description}</Text>
</Spoiler>Examples
Own labels and height
Preview
Code
What's new in 4.2
Faster search in large foldersDark theme for the settings pageExport to CSV from any tableKeyboard shortcuts for moving cardsShared links that expireTwo-step sign-in with a security keyFewer emails about mentionsA new icon for archived projects
API reference
Spoiler
Also takes layout props, such as `width`, for the whole component. A string child is wrapped in Text.| Prop | Type | Default | Description |
|---|---|---|---|
maxHeight | SizeTokens | number | '24' | Height of the content while collapsed: a size token or pixels (96px by default). |
expanded | boolean | — | Controlled expanded state. |
defaultExpanded | boolean | false | Starting state when uncontrolled. |
onExpandedChange | (expanded: boolean) => void | — | Called when the button is pressed, or when focus moves to content that is cut off. |
showLabel | string | 'Show more' | Button label while collapsed. |
hideLabel | string | 'Show less' | Button label while expanded. |
Accessibility
- The button has
aria-expandedandaria-controlspointing at the content. - The content stays in the page while cut off, so screen readers that read past the cut still get all of it.
- On web, tabbing to a link or button below the cut shows the rest, so focus never lands on something hidden.
Platform notes
Web
Watches the content’s size, so the button appears or goes when content grows or shrinks, such as an image that loads.
iOS
Measures the content with
onLayout. VoiceOver may skip words that are cut off; the button shows them.Android
Measures the content with
onLayout. TalkBack may skip words that are cut off; the button shows them.