Appearance

Expand ​

The expand component allows the user to show and hide sections of related content on a page.

Basic Expand ​

Expand elements are controlled via the isExpanded property. Which dictates wether the content is expanded or not.

Hello from expanded! 👋

vue
<Button @click="basicExpanded = !basicExpanded">
  Toggle Expand
</Button>

<Expand :is-expanded="basicExpanded">
  <p>Hello from expanded! 👋</p>
</Expand>

Lazy ​

Expands supports setting the lazy property to true, which makes the expand render its contents with v-if instead of the default v-show.

TIP

See Vue's conditional rendering for more info

vue
<Button @click="lazyExpanded = !lazyExpanded">
  Toggle Lazy Expand
</Button>

<Expand :is-expanded="lazyExpanded" is-lazy>
  <p>I didn't existed until you clicked that button.</p>
</Expand>

Transitions ​

By default, the expand transition is applied to the transitionName property, but the expand transition can be customized by leveraging Vue's transition mechanism.

TIP

See Vue's transition mechanism for more info.

Whoa this transtition is craazy!

vue
<Button @click="transitionExpanded = !transitionExpanded">
  Toggle Transition Expand
</Button>

<Expand :is-expanded="transitionExpanded" transition-name="crazy">
  <p>Whoa this transtition is crazy!</p>
</Expand>

<style>
.crazy-enter-active,
.crazy-leave-active {
  transition: transform 1s ease;
}

.crazy-enter-from,
.crazy-leave-to {
  transform: rotate(180deg);
}
</style>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.