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

$ bower install kasperlewau/angular-float-label

or just grab the source.

Inclusion

var app = 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>
  <input type="email" float-label="Email" ng-model="usr.email" required>
  <textarea float-label="Description" ng-model="usr.description"></textarea>
</form>
<!-- becomes -->
<form>
  <div class="fl-input">
    <label for="usr-email">Email</label>
    <input type="email" float-label="Email" ng-model="usr.email" required="" name="usr-email" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email">
  </div>
  <div class="fl-textarea">
    <label for="usr-description">Description</label>
    <textarea float-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