An implementation of the floating label pattern for Angular. [NOT MAINTAINED]
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
spec
.gitignore
README.md Fix fliker by checking validity of input. Feb 24, 2014
angular-float-label.js newline @eof Feb 27, 2014
bower.json Add specs Feb 26, 2014
karma.conf.js Add Sinon. Switch expect() to should(). Mar 3, 2014
package.json Add Sinon. Switch expect() to should(). Mar 3, 2014

README.md

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

alt text

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