vue-truncate-collapsed

A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable.

Getting Started

#### NPM

``bash
$ npm install vue-truncate-collapsed --save
`

#### Clone this repo

Clone or download the component and save in your own project.

Installing

#### ES6
`js
import truncate from 'vue-truncate-collapsed';

new Vue({
components: {
truncate
}
})
`

#### CommonJS

`js
var truncate = require('vue-truncate-collapsed');

new Vue({
components: {
'truncate': truncate
}
})
`

#### CDN

`js


`

USAGE

#### Text

`html

`

#### Raw HTML

`html

`

#### Add class to Show More/ Show Less link

`html

`

#### Add class to collapsed text

`html

`

Attributes


| Option | Default | Type | Description |
| :------------ | :------------ | :----- | :--------- |
| __truncated__ | false | boolean | The initial state of the truncation. true is collapsed, false is expanded. |
| __text__ | no default value | string | The text that will be truncated. |
| __length__ | 100 | number | Length of text after truncate. |
| __clamp__ | Read More | string | Link that will be after the text with a link to expand. |
| __less__ | Show Less | string | Link that will be after the text when it's expand, when click text collapses. |
| __type__ | text | string | Either text or html. To change whether to treat the input from text` attribute as text or raw HTML. |
| __class__ | empty string | string | To add a class name to the link that will be after the text is expanded or collapsed. |
| __collapsedTextClass__ | '' | string | Allows you to add a class to the text when it is collapsed. |

License

This project is licensed under the MIT License - see the LICENSE.md file for details