Components

Collapse

The Collapse component is used to show and hide content with an animated toggle trigger.

Usage

The Collapse component is a collapsible container that toggles the visibility of its content. It renders a trigger button with a chevron icon and animates the content area when expanded or collapsed.

::portal-collapse
#title
Toggle Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet.
::

Props

expanded

Determines if the collapse content should be visible by default.

  • Type: boolean
  • Default: false
This content is visible by default because expanded is set to true.
::portal-collapse
---
expanded: true
---
#title
Initially Expanded


This content is visible by default because `expanded` is set to `true`.
::

Shared Props

The Collapse component also includes the following shared props:

  • background - default is undefined.
  • border - default is undefined.
  • borderRadius - default is undefined.
  • color - default is undefined
  • margin - default is undefined.
  • maxWidth - default is 'auto'.
  • padding - default is undefined.
  • styles - default is ''.
  • width - default is '100%'.

See here for more information on shared props.

Slots

title

Use the #title slot to set the label displayed inside the trigger button. If omitted, the button shows "Collapse" when expanded or "Expand" when collapsed.

::portal-collapse
#title
View advanced settings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet.
::

default

Use the #default slot to provide the content that will be shown or hidden when the collapse is toggled.