# 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

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

# Transition

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

# Once mode

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

# Asynchronous content

<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:

• Vue > Named Slots
• Vue > Default Slot Content
• Vue > Scoped Slots

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>

# Components

Here are some official custom components:

• @vue-foldable/weibo
• @vue-foldable/csdn
• @vue-foldable/baidu

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)

# @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.

# 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.

# 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