ng-input - Text Input Effects Angular Directives
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
public
src
test
.gitignore
.jshintrc
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
index.html
karma.conf.js
package.json

README.md

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