famous-sizeconstraint
SizeConstraint makes it possible to set the following constraints on renderables:
Option | Description |
---|---|
scale |
Scales the size proportionally to the parent-size (factor). |
padding |
Inner width/height padding (pixels). |
max |
Sets the maximum-size (pixels). |
min |
Sets the minimum-size (pixels). |
ratio |
Aspect ratio to enforce (factor). |
size |
Default size to use instead of the parent size (pixels). |
Demos
- Site demo (demonstrates maximum-width to create a site-layout with borders)
- Photo demo (demonstrates aspect-ratio)
- Scale demo (demonstrates scaling)
- Padding demo (demonstrates padding)
Getting started
Install using bower or npm:
bower install famous-sizeconstraint
npm install famous-sizeconstraint
If necessary, add to the requirejs paths config:
require;
Create a surface with a width 20px less than its parent:
var SizeConstraint = ; var sizeConstraint = padding: 20 undefined;this;var surface = properties: backgroundColor: 'blue' ;sizeConstraint;
Create a surface which is 50% its parent size:
Note: this is different from Transform.scale, as it does not apply a scale-matrix, but it merely changes the size.
var sizeConstraint = scale: 05 05;this;var surface = properties: backgroundColor: 'blue' ;sizeConstraint;
Create a surface with a maximum-width of 400px, and a minimum-height of 100px:
var sizeConstraint = max: 400 undefined min: undefined 100;this;var surface = properties: backgroundColor: 'blue' ;sizeConstraint;
Create a surface with an aspect ratio of 4/3:
var sizeConstraint = ratio: 4 3;this;var surface = properties: backgroundColor: 'blue' ;sizeConstraint;
Documentation
Using multiple constraints
All of the constraints can be combined. When using multiple constraints, the following execution order is in effect:
size
-> scale
-> padding
-> max
-> min
-> aspect-ratio
Contribute
Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.
Contact
- @IjzerenHein
- http://www.gloey.nl
- hrutjes@gmail.com (for hire)
© 2014 - Hein Rutjes