vue-read-more-smooth
vue-read-more-smooth
"Read more" button with animation and easy usage for vuejs.
Install
Via npm:
npm install vue-read-more-smooth --save
Via Yarn:
yarn add vue-read-more-smooth
Demo & examples
Code examples: https://dicren.github.io/vue-read-more-smooth/
Usage
<template>
<VueReadMoreSmooth>
<p>Lorem Ipsum</p>
</VueReadMoreSmooth>
</template>
<script>
import VueReadMoreSmooth from "vue-read-more-smooth";
export default {
name: "app",
components: { VueReadMoreSmooth }
}
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| :lines | number | 3 |
Number of lines to show before the read more button. |
| :g-lines | number | 2 |
Shadow's size. If lines is greater than 12, g-lines default value is 4, if lines is greater than 6, g-lines default value is 3 |
| :max-lines | number | lines + 1 |
If your text has less than max-lines, the container acts as a normal div. |
| :text | string | Read more |
obvious |
| :text-less | string | Read less |
obvious |
| :no-less | boolean | false |
if true button disappear after click read more |
| :open | boolean | false |
open and close programmatically. .sync is available. |
| :no-button | boolean | false |
Hide the button. To use in combination with :open |
| :no-shadow | boolean | false |
Hide the shadow. |
Changelog
0.1.8 - 2019-08-09
Added
- :open property
- :no-button property
- :no-shadow property
Removed
- :open-by-default property, replaced by :open
License
⌨️ with ❤️ by dicren
Related Packages
duplicate-dependencies-webpack-plugin
webpack plugin to find duplicated dependencies from your bundle
332,104
6
Version History
| Version | Released | License |
|---|---|---|
| 0.1.8 | MIT | |
| 0.1.7 | MIT | |
| 0.1.6 | MIT | |
| 0.1.5 | MIT | |
| 0.1.4 | MIT | |
| 0.1.3 | MIT | |
| 0.1.2 | MIT | |
| 0.1.1 | MIT | |
| 0.1.0 | MIT |