Documentation
Webframe UI
Components
Expand

Expand

A component to expand and collapse content along the width or the height. It has customisable animation duration, and is SEO friendly (search engines can index collapsed content when forceRender is true).

The Expand component can be used with, or without:

  • ExpandTab - the always visible element that triggers expansion/collapsing
  • ExpandPanel - the expanded or collapsed content

Props

Expand Props

PropTypeDefaultDescription
children
String
|
Number
|
Boolean
|
Function
Required

Expand content (see examples)

direction
Enum
'height'

Expand/collapse direction

duration
Millisecond
300

Animation duration in milliseconds

forceRender
Boolean

Whether to always render <ExpandPanel> content

id
String

Optional unique identifier, will be passed to onChange, default is React.useId() string

index
Number

Optional index identifier, will be passed to onChange (used by Accordion)

onChange
Function

Callback(event: Event, open: boolean, id: string, index?: number) when open state changes

open
Boolean

Whether to expand content

asPanel
Boolean

Whether to wrap children prop with <ExpandPanel> component (for use without <ExpandTab>)

ExpandTab Props

PropTypeDefaultDescription
children
String
|
Number
|
Boolean
|
Function
Required

Expansion trigger element (see examples)

onClick
Function

Callback(event: Event, open: boolean, id: string | number, index?: number) when open state changes

ExpandPanel Props

PropTypeDefaultDescription
children
String
|
Number
|
Boolean
|
Function
Required

Expandable content (see examples)

forceRender
Boolean

Whether to always render content (for SEO indexing)

Examples

Vertical Expansion

Along the height

Horizontal Expansion

Along the width

Dynamic Render Function

Expand, ExpandTab and ExpandPanel have identical function signature

Forced Rendering

Inspect element to see hidden HTML

Controlled State

Example below is expanded with `open` state

This content is wrapped with <ExpandPanel> implicitly

DividerIcon