Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kavalcante/vue-truncate-collapsed

A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
https://github.com/kavalcante/vue-truncate-collapsed

component javascript vue vue-component vue2

Last synced: about 1 month ago
JSON representation

A simple component that truncates your text and adds a 'Read More/Show Less' clickable.

Lists

README 

        
# 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](https://github.com/kavalcante/vue-truncate-collapsed/archive/master.zip) 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](LICENSE.md) file for details