Angular-autolayout provides an
that can be used to layout DOM elements based on constraints. You can
finally make those divs have the same height! Think of the potential
for Chrome Apps
think of Cordova apps!
<div id="demo1" class="demo-container" al-update-on-resize> <div id="demo1-A" class="demo-box">A</div> <div id="demo1-B" class="demo-box">B</div> <div id="demo1-C" class="demo-box">C</div> <al-constraint align="top">|-[demo1-A(==demo1-B,==demo1-C)]-[demo1-B]-|</al-constraint> <al-constraint>V:|-[demo1-A]-|</al-constraint> <al-constraint align="right">V:|-[demo1-B(==demo1-C)]-[demo1-C]-|</al-constraint> </div>
al-constraints you can see Apple's Visual Format Language
that can also be used to specify the layout of Cocoa applications.
Setup Bower and then use:
bower install angular-autolayout
To install Angular-Autolayout in your current directory's bower_component folder.
Include the script in your page after AngularJS like so:
<script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-autolayout/angular-autolayout.min.js"></script>
Then include it as a dependency for your AngularJS app module:
Can you figure out the autolayout visual format language?
means the container view,
- is a standard space and elements
are referenced by id like so
V: stands for "vertical" and the
is a shortcut that makes elements named in that constraint align in respect
of each other. Give it a try.
Try to reproduce the following layouts:
Ha! For this you'll need a different form of the directive. Check out the documentation!
...and you're good to go! Make sure to checkout the documentation to create even cooler layouts and make them update on window resize. Enjoy!
* this one may not be possible in this playground.