actions

Expander

Expand and collapse long content in a tap

Features

Keyboard accessible
Themes ready

Links

Open in playground Open in Storybook View source ARIA authoring

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.

Name	Description
`tab`	Move focus on the summary element or outside
`enter`	Expand or collapse the content