Skip to content

Latest commit

 

History

History
91 lines (63 loc) · 3.2 KB

README.md

File metadata and controls

91 lines (63 loc) · 3.2 KB
Raw

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

import truncate from 'vue-truncate-collapsed';

new Vue({
  components: {
    truncate
  }
})

CommonJS

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

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

CDN

<!-- import JavaScript -->
<script src="https://unpkg.com/vue-truncate-collapsed"></script>

USAGE

Text

<truncate clamp="..." :length="90" less="Show Less" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et."></truncate>

Raw HTML

<truncate clamp="..." :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Add class to Show More/ Show Less link

<truncate action-class="customClass" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Add class to collapsed text

<truncate collapsed-text-class="collapsed" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

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