Expandable - Vue

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Vue

AndroidElementsiOSReactVue

Import

Use in entire app

import { Expandable } from '@warp-ds/vue';
app.use(Expandable);

Use in one component and special imports

You can import the component like so:

import { wExpandable, wExpandTransition, wWillExpand } from '@warp-ds/vue';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { wExpandable, wExpandTransition, wWillExpand } from '@warp-ds/vue/expandable';

Syntax

<w-expandable title="I am expandable">
  <p>Hello there I am some informative content</p>
</w-expandable>

Visual options

Default

<w-expandable title="I am expandable">
  <p>Hello there I am some informative content</p>
</w-expandable>

Expandable box

<w-expandable title="I am expandable" box>
  <p>Hello there I am some informative content</p>
</w-expandable>

Animation

You should only use this feature under careful supervision of your friendly local UXer.

The w-expandable component can be animated using the animated prop.

<w-expandable animated title="I am expandable">
  <p>Hello there I am some informative content</p>
</w-expandable>

The wExpandTransition component can wrap one or more wWillExpand components.

<w-expand-transition group>
  <w-will-expand v-if="expanded">Hello</w-will-expand>
  <w-will-expand v-else>Hi</w-will-expand>
<w-expand-transition>

Props

Optional Props

Name	Type	Default	Description
v-model	boolean	false	If not provided, the component will use an internal value that starts the expandable 'closed'
as	string	div	The DOM element to emit
box	boolean		Will make the expandable a Box
bleed	boolean		Will make the expandable full-width on sm-size
buttonClass	string		Additional CSS classes to include on the button part of the component
contentClass	string		Additional CSS classes to include on the content part of the component
chevron	boolean	true	Controls chevron visibility

Slots

Name	Description
title	string
default	string

Events

Name	Description
expand	boolean
collapse	boolean

Questions?

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