vue-truncate-collapsed
A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable.
Getting Started
NPM
$ npm install vue-truncate-collapsed --save
Clone this repo
Clone or download the component and save in your own project.
Installing
ES6
; components: truncate
CommonJS
var truncate = ; components: 'truncate': truncate
CDN
<!-- <script src="https://unpkg.com/vue-truncate-collapsed"></script>
USAGE
Text
Raw HTML
Add class to Show More/ Show Less link
Add class to collapsed text
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