All Projects → cesardeazevedo → Ng Input

cesardeazevedo / Ng Input

Licence: mit
ng-input - Text Input Effects Angular Directives

Projects that are alternatives of or similar to Ng Input

Jquery Rslitegrid
Input tabular data with your keyboard
Stars: ✭ 5 (-91.67%)
Mutual labels:  input
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+1588.33%)
Mutual labels:  input
Material Ui Password Field
A password field using Material-UI.
Stars: ✭ 54 (-10%)
Mutual labels:  input
Form Js
Easily create web forms. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.
Stars: ✭ 9 (-85%)
Mutual labels:  input
Button
An Arduino compatible library to make working with user input easier
Stars: ✭ 27 (-55%)
Mutual labels:  input
Bentools Etl
PHP ETL (Extract / Transform / Load) library with SOLID principles + almost no dependency.
Stars: ✭ 45 (-25%)
Mutual labels:  input
Inputbaraccessoryview
A simple and easily customizable InputAccessoryView for making powerful input bars with autocomplete and attachments
Stars: ✭ 807 (+1245%)
Mutual labels:  input
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (+1721.67%)
Mutual labels:  input
Whatpulse
WhatPulse reverse engineered
Stars: ✭ 30 (-50%)
Mutual labels:  input
Insert Text At Cursor
Fast crossbrowser insertion of text at cursor position in a textarea / input
Stars: ✭ 49 (-18.33%)
Mutual labels:  input
React Input Tags
React component for tagging inputs.
Stars: ✭ 10 (-83.33%)
Mutual labels:  input
Angular Datetime Range
📅 Angular directive for datetime range input
Stars: ✭ 27 (-55%)
Mutual labels:  input
Cfrs
Child Frame Read String
Stars: ✭ 46 (-23.33%)
Mutual labels:  input
Apos.input
Polling input library for MonoGame.
Stars: ✭ 25 (-58.33%)
Mutual labels:  input
Svelte Input Mask
Input masking component for Svelte with simple API and rich customization
Stars: ✭ 56 (-6.67%)
Mutual labels:  input
Rskgrowingtextview
A light-weight UITextView subclass that automatically grows and shrinks.
Stars: ✭ 820 (+1266.67%)
Mutual labels:  input
Crossterm
Cross platform terminal library rust
Stars: ✭ 1,023 (+1605%)
Mutual labels:  input
Customui
Library to create custom UI's in MCPE 1.2+
Stars: ✭ 60 (+0%)
Mutual labels:  input
Pc Optimization Hub
collection of various resources devoted to performance and input lag optimization
Stars: ✭ 55 (-8.33%)
Mutual labels:  input
Sgdigittextfield
Elegant and Simplest Digit UITextField
Stars: ✭ 47 (-21.67%)
Mutual labels:  input

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].