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: 14 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kavalcante/vue-truncate-collapsed
• Owner: kavalcante
• License: mit
• Created: 2017-03-23T19:04:39.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T02:46:09.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T06:05:08.782Z (7 months ago)
• Topics: component, javascript, vue, vue-component, vue2
• Language: Vue
• Homepage: https://kavalcante.github.io/vue-truncate-collapsed/
• Size: 1.6 MB
• Stars: 108
• Watchers: 3
• Forks: 17
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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