kavalcante / Vue Truncate Collapsed
Licence: mit
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
Stars: ✭ 98
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Truncate Collapsed
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+605.1%)
Mutual labels: component, vue-component, vue2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (+130.61%)
Mutual labels: component, vue-component, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+158.16%)
Mutual labels: component, vue-component, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+5301.02%)
Mutual labels: component, vue2
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (+419.39%)
Mutual labels: vue-component, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+20400%)
Mutual labels: vue-component, vue2
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+6914.29%)
Mutual labels: vue-component, vue2
Vue Img Inputer
🏞 A graceful image type inputer / uploader
Stars: ✭ 548 (+459.18%)
Mutual labels: component, vue2
V Distpicker
✨ A flexible, highly available district picker for picking provinces, cities and districts of China.
Stars: ✭ 919 (+837.76%)
Mutual labels: component, vue-component
Region Picker
A region picker based on Vue and ElementUI.
Stars: ✭ 59 (-39.8%)
Mutual labels: component, vue2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+352.04%)
Mutual labels: vue-component, vue2
Pdfvuer
A PDF viewer for Vue using Mozilla's PDF.js
Stars: ✭ 443 (+352.04%)
Mutual labels: component, vue-component
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-5.1%)
Mutual labels: vue-component, vue2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+4008.16%)
Mutual labels: vue-component, vue2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-65.31%)
Mutual labels: component, vue2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-37.76%)
Mutual labels: component, vue2
Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-12.24%)
Mutual labels: vue-component, vue2
Vue Flow Form
Create conversational conditional-logic forms with Vue.js.
Stars: ✭ 315 (+221.43%)
Mutual labels: vue-component, vue2
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].