Skip to content

janakaedirisinghe/vu-read-more

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vu-read-more

This is a component/plugin designed for implementing read more functionality that is both straightforward and customizable and is intended to enhance the user experience. ❤️

Usage

npm i vureadmore
import  VuReadMore  from  'vureadmore'

app.component('VuReadMore', VuReadMore);  //Global Registration

components:  {  
	VuReadMore,  
},  //Local Registration

Features

  • Add text break characters length.
  • Custom read more button text.
  • Custom show less button text.
  • Custom readmore/showless button styles.
  • Custom text styles.
  • Add only read more feature without show less.
  • Add redirect link with new tab or same tab.

API

Param Data Type Default Description
text String none This is used to format the read-more/show-less paragaph text based on the charLength
charLength Number 50 This is used to limit the text to generate read-more/show-less text
readMoreText String read more This is used to change the read more button text
readLessText String show less This is used to change the show less button text
buttonStyle Object { color:'blue', cursor:'pointer', text-decoration:'underline' } This is used to customize the read-more/show-less button styles
textStyle Object none This is used to customize the text styles
readMoreOnly Boolean false Control the show-less function. You can use only read-more option here.
redirect Object { link: '#', newTab: true } You can pass a link to navigate the user when the read more button is clicked. You can control the opening positions using newTab key.

Example

<template>
  <span>
    <vu-read-more 
      :text="str" 
      :charLength="maxCharLength"
      readMoreText="Custom Read More Text" 
      readLessText="Custom Show Less Text" 
      :textStyle="textStyle"
      :buttonStyle="buttonStyles"
      :redirect="redirectObj"
    />
  </span>
</template>

<script>
import  VuReadMore  from  'vureadmore'

export default {
  name: 'App',
  data() {
    return {
      str: 'Lorem  dolor sit amet consectetur, adipisicing elit!',
      buttonStyles: { color: 'red', cursor: 'pointer' },
      redirectObj: { link: 'https://www.google.com', newTab: true },
      textStyle: { color: 'red' },
      maxCharLength: 150
    }
  },
  components: {
	  VuReadMore
  }
}
</script>

ezgif com-video-to-gif

About

📌 A Simple & customizable readmore package for your vue applications.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published