Content Toggle Component For Vue.js – Vue Show

Install & Download:

# Yarn
$ yarn add vue-show
# NPM
$ npm install vue-show --save

Description:

A dependency-free vertical show/hide component (with easing functions) for Vue.

Usage:

import xShow from 'x-show'
import easings from 'easings'
export default {
  name: 'app',
  data: () => ({
    list: [],
    isShow: true,
    easing: Object.keys(easings)[0],
  }),
  components: {
    xShow,
  },
  created () {
    this.list = Object.keys(easings).map(
      key => ({
        key,
        show: true,
        active: false,
      })
    )
    this.list[0].active = true
  },
  methods: {
    handleClick ({ key }, idx) {
      this.easing = key
      this.list.forEach((item, index) => {
        item.active = idx === index
      })
    },
  },
}

<template lang="pug">
  div.app
    h1 Vue Show
    button(
      :class="{'active': isShow}"
      @click="isShow = !isShow"
    ) Click me! Status: {{isShow ? 'show' : 'hide'}}
    x-show.easings(
      :show="isShow"
      :easing="easing"
      :duration="700"
      transition-on-mount
      unmount-on-hide
    )
      ul
        li(v-for="(item, idx) in list")
          button(
            :class="{'active': item.active}"
            @click="handleClick(item, idx)"
          ) {{item.key}}
</template>

Props:

show: {
  type: Boolean,
  default: () => true,
},
transitionProperty: {
  type: String,
  default: () => 'height',
},
duration: {
  type: Number,
  default: () => 500,
},
easing: {
  type: String,
  default: () => 'ease-out',
},
minHeight: {
  type: Number,
  default: () => 0,
},
maxHeight: {
  type: Number,
  default: () => 0,
},
transitionOnMount: {
  type: Boolean,
  default: () => false,
},
unmountOnHide: {
  type: Boolean,
  default: () => false,
},
height: {
  type: Number,
  default: () => 0,
},

Preview: