Git Product home page Git Product logo

scaled-text's Introduction

angular-fittext

Change Log

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

scaled-text's People

Contributors

sollenne avatar kennyrulez avatar michaelgira23 avatar mburger81 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.