Getting Started

Install

yarn add vue-foldable -S
# or
npm install vue-foldable -S

Usage

import VueFoldable from 'vue-foldable'
import 'vue-foldable/dist/vue-foldable.css'

Vue.component('foldable', VueFoldable)
<foldable>
  <!-- Your content -->
</foldable>

Showcase

Infinite mode


Source
<foldable class="infinite-demo" height="100">
  <vue-intro/>
</foldable>

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Transition


Source
<foldable class="transition-demo" height="100">
  <vue-intro/>
</foldable>

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Once mode


Source
<foldable class="once-demo" height="%50" once>
  <vue-intro/>
</foldable>

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Asynchronous content


Source
<foldable class="async-demo transition-demo" height="%50" async>
  <p align="center">
    <img src="https://vuejs.org/images/logo.png"/>
  </p>
</foldable>

Custom UI

vue-foldable provides some slots and gives you the ability to customize the UI. Before that, you need to know the following knowledge:

A simple wrapper component would be like this:

<template>
  <foldable class="my-foldable" height="%50" async>
    <!-- default slot -->
    <slot></slot>

    <!-- named slot -->
    <p align="center" class="my-foldable"
       slot="view-more" slot-scope="{ toggle, collapsed }" @click="toggle">
      {{ collapsed ? 'See more' : 'Fold it!' }}
    </p>
  </foldable>
</template>

<style lang="stylus">
  .vue-foldable {
    &.my { /* override */
      .vue-foldable-mask {
        /* tweak the mask's postion according to your view more's height */
        bottom: 36px
      }
    }
  }
</style>

See more

Components

Here are some official custom components:

For a complete list of components, please step to packages.

  • Install:
npm install @vue-foldable/${name} -S
  • Usage:
import comp from '@vue-foldable/${name}'
import '@vue-foldable/${name}/dist/${name}.css'

Vue.component('${name}-foldable', comp)

TIP

Replace ${name} with your expected target component sub name.

@vue-foldable/weibo

@vue-foldable/csdn

@vue-foldable/baidu

Props

height

  • Type: string | number
  • Default: 100

Set the value of initial visual height. percentage string is also support, e.g. 20%, 50% —— When folded, the visible height will be proportional to the total height of the content.

TIP

Note that view more part will never be displayed when the height of the content doesn't reach the threshold.

minHeight

  • Type: number
  • Default: 100

When you use percentage, the calculated height based on the dynamic elements may be very small, you can use this option to set a minimum height.

once

  • Type: boolean
  • Default: false

By default, when you expand the content, you can also fold it again. You can make the expansion operation running only once via setting this option to true.

async

  • Type: boolean
  • Default: false

vue-foldable will try to inspect whether the content's height meet the threshold for the display of view more at mounted hook, but sometimes, if content contains replaced element, e.g. <img>, the height of content will be possible to change.

In this case, you can set async to true and vue-foldable will watch the content height change and re-initialize when the height changes.

noMask

  • Type: boolean
  • Default: false

whether to display the transparency gradient mask, defaults to.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Transition

By default, vue-foldable don't have any transition preset, you can customize transition via CSS:

.vue-foldable-container {
  transition: max-height 0.3s;
}

.vue-foldable-mask {
  transition: opacity 3s;
}

License

MIT © ULIVZ

Last Updated: 9/10/2018, 3:10:34 PM