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>
Transition
Source
<foldable class="transition-demo" height="100">
<vue-intro/>
</foldable>
Once mode
Source
<foldable class="once-demo" height="%50" once>
<vue-intro/>
</foldable>
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.
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