famous-sizeconstraint

    0.3.0 • Public • Published

    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

    Getting started

    Install using bower or npm:

    bower install famous-sizeconstraint
    
    npm install famous-sizeconstraint
    

    If necessary, add to the requirejs paths config:

    require.config({
        paths: {
            ...
            'famous-sizeconstraint': 'bower_components/famous-sizeconstraint/SizeConstraint',
            ...
        }
    });

    Create a surface with a width 20px less than its parent:

    var SizeConstraint = require('famous-sizeconstraint');
     
    var sizeConstraint = new SizeConstraint({
        padding: [20, undefined]
    });
    this.add(sizeConstraint);
    var surface = new Surface({ properties: { backgroundColor: 'blue' }});
    sizeConstraint.add(surface);

    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 = new SizeConstraint({
        scale: [0.5, 0.5]
    });
    this.add(sizeConstraint);
    var surface = new Surface({ properties: { backgroundColor: 'blue' }});
    sizeConstraint.add(surface);

    Create a surface with a maximum-width of 400px, and a minimum-height of 100px:

    var sizeConstraint = new SizeConstraint({
        max: [400, undefined],
        min: [undefined, 100]
    });
    this.add(sizeConstraint);
    var surface = new Surface({ properties: { backgroundColor: 'blue' }});
    sizeConstraint.add(surface);

    Create a surface with an aspect ratio of 4/3:

    var sizeConstraint = new SizeConstraint({
        ratio: [4, 3]
    });
    this.add(sizeConstraint);
    var surface = new Surface({ properties: { backgroundColor: 'blue' }});
    sizeConstraint.add(surface);

    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

    © 2014 - Hein Rutjes

    Install

    npm i famous-sizeconstraint

    DownloadsWeekly Downloads

    4

    Version

    0.3.0

    License

    none

    Last publish

    Collaborators

    • ijzerenhein