@clampy-js/vue-clampy

    1.0.6 • Public • Published

    vue-clampy

    Build Status GitHub issues GitHub license npm

    Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

    It uses @clampy-js/clampy library (a fork of Clamp.js) behind the scene to apply the ellipsis.

    It automatically re-clamps itself when the element or the browser window change size.

    Installation

    You can install @clampy-js/vue-clampy using NPM or Yarn:

    npm install @clampy-js/vue-clampy
    
    yarn install @clampy-js/vue-clampy
    

    Usage

    <script>
    import clampy from '@clampy-js/vue-clampy';
    import Vue from 'vue';
     
    Vue.use(clampy);
     
    export default {
      name: 'app',
      directives: {
        clampy 
      }
    };
    </script>
    <template>
      <p v-clampy="3">Long text to clamp here</p>
    </template>  

    Options

    You can also override default options globally:

     
    Vue.use(clampy, {
      truncationChar: '✂️'
    });
     

    Install

    npm i @clampy-js/vue-clampy

    DownloadsWeekly Downloads

    377

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    18.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • alexandre.moore