Nuanced Pumpkin Mavens

    angular-fittext
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    angular-fittext

    Change Log

    Heres the demo!

    Angular directive (typescript) to do what fittext.js did when jquery was cool. This auto-scales the font size to fit the width of it's container.

    Versioning & What heppened to ng4-fittext?

    This package was renamed angular-fittext to get rid of the ng version binding. This will follow the updates for angular and will not need to be bound specifically to a version of angular. We have kept the same github repo, but renamed it to angular-fittext.

    Installation

    Install the library

    $ npm install --save angular-fittext

    Usage

    Import it in your Angular project as a module

    1. Declare it in your module

      import {AngularFittextModule} from 'angular-fittext';
       
      @NgModule({
        imports: [
          AngularFittextModule,
          ...
        ]
      })
       
    2. Use it in a component

      The element that contains this directive should have a CSS width!

      import {Component} from '@angular/core';
       
      @Component({
        selector: 'hero',
        template: `
          <div style="align-content: center;">
              <div style="width: 20%; height: 20%; margin: 0 auto;">
                  <div fittext>test</div>
              </div>
           </div>`
      })
       
      export class AppComponent {}

      Parameters:

    Parameter Description Values
    fittext (required) Selector for the directive. boolean (defaults to true)
    [activateOnResize] (optional) enable/disable the auto-scale in case of window resize boolean (defaults to true)
    [compression] (optional) compression rate. How fast should the text resize? *As of v1.2.0, this can receive a dynamic value. number (defaults to 1)
    [minFontSize] (optional) minimum font size allowed on element number (defaults to 0)
    [maxFontSize] (optional) maximum font size allowed on element number (defaults to infinity)
    [delay] (optional) time to delay resize (in nanoseconds) number (defaults to 100)
    [fontUnit] (optional) font unit to apply to the fontSize px, em, ... (defaults to px)

    Development

    Want to contribute? Great! Simply, clone the repository!

    License

    ISC

    - Rich

    Install

    npm i angular-fittext

    DownloadsWeekly Downloads

    1,568

    Version

    2.1.1

    License

    ISC

    Unpacked Size

    144 kB

    Total Files

    26

    Last publish

    Collaborators

    • sollenne