ng-input

Text Input Effects Directives

ng-input is a fork from codrops - Text Input Effects, to work with angular directives.

Demo

Demo

Install

Install using bower

bower install ng-input

Install using npm

npm install ng-input

Usage

Include the ngInput as a dependency for your app.

angular.module('myApp', ['ngInput']);

add the directive to your html.

<ng-input theme='hoshi'></ng-input>

Base Styles

To make it work as the demo page, there is some css properties that you should include.

    *, *:after, *:before {
        box-sizing: border-box;
    }
    
    input{
        font-size: 100%
    }

and for bigger

    .input{
        font-size: 150%
    }

Options

• theme
• type
• label
• color
• icon

default attributes from default angular input directive

• name
• ng-model
• ng-required
• ng-minlength
• ng-maxlength
• ng-pattern
• ng-change
• ng-trim

Icons

The examples are using material design icons, you should declare icon icon--theme mdi mdi-account to make it work.

<ng-input theme='fumi' icon='icon icon--fumi mdi mdi-account'></ng-input>

Themes

Our Themes

TODO

Codrops Themes

• Haruki
• Hoshi
• Kuro
• Jiro
• Minoru
• Yoko
• Hideo
• Kyo
• Akira
• Ichiro
• Juro
• Madoka
• Kaede
• Isao
• Manami
• Nariko
• Nao
• Yoshiko
• Shoko
• Chisato
• Makiko
• Sae
• Kozakura
• Fumi
• Ruri
• Kohana

Contributing

Feel free to add your own style.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Credits

Credit goes to codrops for an AWESOME work with Text Input Effects

check their article

License

LICENSE