angular-float-label

An implementation of the Float Label Pattern for Angular. At this stage the code is still very much in its baby-state, so treat it as such (not production ready).

Installation

$bowerinstallkasperlewau/angular-float-label

or just grab the source.

Inclusion

varapp=angular.module('myModule',['kl.angular-float-label', ...]);

Example

Useage

.fl-input, .fl-textarea {
position: relative;
input,label,textarea {
transition: all ease-in-out .15s;
&::-webkit-input-placeholder { color: inherit; }
&::-moz-placeholder { color: inherit; } /* firefox 19+ */&:-ms-input-placeholder { color: inherit; } /* ie */&:-moz-placeholder { color: inherit; }
}
label {
position: absolute;
top:-1.1em;
left:5px;
opacity:0;
}
&.fl-focused,&.fl-populated {
label {
opacity:1;
top:-1.5em;
left:5px;
}
}
}

<form><inputtype="email" float-label="Email" ng-model="usr.email" required><textareafloat-label="Description" ng-model="usr.description"></textarea></form><!-- becomes --><form><divclass="fl-input"><labelfor="usr-email">Email</label><inputtype="email" float-label="Email" ng-model="usr.email" required="" name="usr-email" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email"></div><divclass="fl-textarea"><labelfor="usr-description">Description</label><textareafloat-label="Description" ng-model="usr.description" name="usr-description" class="ng-pristine ng-valid"></textarea></div></form>

To-dos

• Write tests
• Move away from the oh-so-stupid setTimeout() on init.
• Handle HTML5 inline validation.
  • Conditional placeholder attributes + inherited styling to enable HTML5 validations.
  • Some sort of flickering introduced with this upon multiple submits, check it out.
• Move DOM transforming to compile().
  • [/] Not fully switched to compile(), working as of now however.
• Add hosted demo with examples // Improve README.
• Add support for passed in opts as args
  • Classes
  • Animation
  • Predefined type
• Probably 100 other things I've yet to think of.

License

MIT