v12.11.0


actions

Expander

Expand and collapse long content in a tap

Features

  • Keyboard accessible
  • Themes ready

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis nobis ipsum natus laudantium dolorem sapiente, sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque! Lorem ipsum dolor sit amet consectetur adipisicing elit.

Anatomy

import { Expander } from "@wonderflow/react-components";
export default () => {
return (
<Expander>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus corporis nobis ipsum natus laudantium dolorem sapiente,
sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus corporis nobis ipsum natus laudantium dolorem sapiente,
sint adipisci at asperiores quia ex voluptatum veniam! Quos rerum natus eos excepturi atque!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</Expander>
);
};

tsx

API Reference

Expander

PROPERTY
TYPE
DEFAULT
expandLabel
string
Show more
collapseLabel
string
Show less
visibleArea
string
100px
defaultExpanded
boolean
false

Accessibility

Adheres to the disclosure role requirements.

NameDescription
tabMove focus on the summary element or outside
enterExpand or collapse the content

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024