Expandable - Elements

Expandable is a layout component used for creating content that can be expanded and collapsed.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

AndroidElementsiOSReactVue

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Accessibility

Usage

Examples

<w-expandable title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>

Expandable box

<w-expandable title="I'm expandable" animated box>
  <p>with expanded content</p>
</w-expandable>

Expandable box with custom title

This can be used if more control over styling is needed than the title prop allows

<w-expandable animated box>
  <div slot="title" class="flex flex-row items-center">
    <w-icon-bag-16></w-icon-bag-16>
    <p class="ml-8 mb-0">This is a title with an icon</p>
  </div>
  <p>with expanded content</p>
</w-expandable>

With expanded prop

<w-expandable animated box title="I'm expanded by default" expanded>
  <p>content should be visible</p>
</w-expandable>

Styling API

<w-expandable> API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties

Name	Type	Default	Summary
animated	boolean	false	Will animate the expansion/collapse
bleed	boolean	false	Will make the expandable full-width on the sm breakpoint size
box	boolean	false	Will make the expandable a Box
button-class	string	-	Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
content-class	string	-	Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
expanded	boolean	false	Controls component's expanded state
heading-level	number	-	Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
no-chevron	boolean	false	Controls chevron visibility
title	string	-	Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

Property Details

animated

Will animate the expansion/collapse

• Type: boolean
• Default: false

bleed

Will make the expandable full-width on the sm breakpoint size

• Type: boolean
• Default: false

box

Will make the expandable a Box

• Type: boolean
• Default: false

button-class

Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

• Type: string
• Default: -

content-class

Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

• Type: string
• Default: -

expanded

Controls component's expanded state

• Type: boolean
• Default: false

heading-level

Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.

• Type: number
• Default: -

no-chevron

Controls chevron visibility

• Type: boolean
• Default: false

title

Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

• Type: string
• Default: -

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system