Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cesardeazevedo/ng-input
ng-input - Text Input Effects Angular Directives
https://github.com/cesardeazevedo/ng-input
angular codrops input input-effects ng-input
Last synced: 7 days ago
JSON representation
ng-input - Text Input Effects Angular Directives
- Host: GitHub
- URL: https://github.com/cesardeazevedo/ng-input
- Owner: cesardeazevedo
- License: mit
- Created: 2015-07-02T18:03:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-17T09:12:51.000Z (over 7 years ago)
- Last Synced: 2024-04-25T10:00:56.745Z (7 months ago)
- Topics: angular, codrops, input, input-effects, ng-input
- Language: CSS
- Homepage: http://cesardeazevedo.github.io/ng-input/
- Size: 1000 KB
- Stars: 59
- Watchers: 9
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ng-input
Text Input Effects Directives
ng-input is a fork from [codrops - Text Input Effects](https://github.com/codrops/TextInputEffects), to work with angular directives.
# Demo
[Demo](http://cesardeazevedo.github.io/ng-input/)
# 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.
```js
angular.module('myApp', ['ngInput']);
```
add the directive to your html.
```html
```
# Base Styles
To make it work as the demo page, there is some css properties that you should include.
```css
*, *:after, *:before {
box-sizing: border-box;
}
input{
font-size: 100%
}
```
and for bigger
```css
.input{
font-size: 150%
}
```
# Options
- theme
- type
- label
- color
- icon
default attributes from default angular [input directive](https://docs.angularjs.org/api/ng/directive/input)
- name
- ng-model
- ng-required
- ng-minlength
- ng-maxlength
- ng-pattern
- ng-change
- ng-trim
# Icons
The examples are using [material design icons](https://materialdesignicons.com/), you should declare `icon icon--theme mdi mdi-account` to make it work.
```html
```
# Themes
### Our Themes
> TODO
### [Codrops Themes](http://tympanus.net/Development/TextInputEffects/)
- 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](http://tympanus.net/codrops/) for an **AWESOME** work with [Text Input Effects](https://github.com/codrops/TextInputEffects)
[check their article](http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/)
# License
[LICENSE](./LICENSE)