Currently supported elements are input[type='text/email/password/number'], select and textarea.
So what is cool about it?
- label and form element are both animated and are NOT positioned absolute (meaning the label will stay in the normal document flow)
- very simple (happy extending)
Plunker: embedded view / edit
$ bower install angular-flabel --saveInject the directive into your app:
var app = angular.module('app', ['thegitfather.flabel']);Add flabel directive to a form element:
<div class="form-group">
<input id="normalTextInput" type="text" class="form-control"
placeholder="Email address (e.g. [email protected])"
name="normalTextInput"
required
ng-model="normalTextInput1"
flabel="Your Email" />
</div>The form element should be enclosed by some kind of container (e.g. <div class="form-group">...</div>). You also need to specify a model (ng-model="..."). If the flabel attribute contains no string then the text from placeholder will be used.
Just fork or clone this repo, then:
$ cd angular-flabel && npm installIf your project is using bower and your clone is outside your project directory, you can use $ bower link🔗
If you installed gulp globally just run $ gulp watch or $ gulp build. Otherwise type $ npm start to use the locally installed gulp to start the watch task.