Vue-read-more-smooth NPM

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

npm.io

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.