Naughty Pinching Mannequins

    ngx-cut
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.28 • Public • Published

    NgxCut

    npm version Package License NPM Downloads Build & Publish codecov stars forks HitCount

    Angular directive for cutting texts with responsive options

    Angular 12, Ivy and SSR compatible

    Here's the demo or stackblitz live preview

    • Lightweight
    • No dependencies!
    • Directive way
    • Highly customizable options...
    • Responsivity supported
    • Predefined breakpoints (Bootrstrap, CDK, FxLayout)

    Install

    1. Use yarn (or npm) to install the package
    yarn add ngx-cut
    
    1. Add NgxCutModule into your module imports
      import { NgxCutModule } from 'ngx-cut';
    
      @NgModule({
       // ...
       imports: [
         // ...
         NgxCutModule.forRoot({
           // directive without [size] uses this value
           size: 1,
           // custom breakpoints
           breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
           // lines be truncated in responsive mode
           responsiveSizes: {
             xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
             sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
             md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
             lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
             xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
           }
         })
       ]
      })
    
      // or
    
      @NgModule({
       // ...
       imports: [
         // ...
         NgxCutModule.forRoot({
           // directive without [size] uses responsiveSizes.sm
           size: 'sm',
           // predefined breakpoint ('BOOTSTRAP', 'FX_LAYOUT' or 'CDK')
           breakpoints: 'BOOTSTRAP',
           // lines be truncated in responsive mode
           responsiveSizes: {
             xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
             sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
             md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
             lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
             xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
           }
         })
       ]
      })
    
      // or
    
      @NgModule({
       // ...
       imports: [
         // ...
         NgxCutModule
       ]
      })

    Quick start

    Example code

    <p ngxCut>some long text</p>

    Result

      some long...
    

    Options

    Root options

    Option Type Default Description
    size string or number 1 Number of truncated lines
    breakpoints object DEFAULT_BREAKPOINTS Breakpoints used in responsive mode
    responsiveSizes object DEFAULT_RESPONSIVE_SIZES How many lines should be truncated for each breakpoint

    Directive

    Option Type Default Description
    [size] object value taken from root options Number of truncated lines or responsive mode
    [truncateDisabled] boolean false Whether truncation is active or not
    (truncateChange) () => object none Event called when truncation is changed.

    Dependencies

    None

    License

    Copyright © 2020 - 2021 Dominik Hladik

    All contents are licensed under the MIT license.

    Install

    npm i ngx-cut

    DownloadsWeekly Downloads

    38

    Version

    1.0.28

    License

    MIT

    Unpacked Size

    211 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar