Size Expressions - globules-io/OGX.JS GitHub Wiki
OGX.JS provides a way to work with sizes using a size expression, in a responsive environment. All calculations happen through the static method OGX.Data.getBestSize
Here are a bunch of size expressions
const exp = '200|300px|60%+';
const exp = '400|50%-';
const exp = '400[200,600]';
const exp = '100px|400px|60%+[100,400]';
const exp = '150|300px|400|70%-[=100]
The piping indicates the framework to select the best size for an element, considering its parent width.
The expression
200|300px|60%
+ means, the width should be200px
or300px
or60%
of its parent, pick whatever is the largest, via the+
sign, that still fits inside the parent.
If you'd rather get the smallest size, use the
-
sign instead.
You can also set limits, such as
[100,400]
, meaning bigger than100px
and smaller than400px
. In this case,getBestSize
would return a size in the expression that does not violate the limits. For instance, the expression150,50%+[100,600]
would return either150px
or50%
considering the limits> 100px
and< 600px
.
You can also set hard limits, such as
[=100,=400]
, in which case, the returned value would not be150px
or50%
but instead100px
or400px
depending on if the calculated size (150px
or50%
) exceeded the hard limits. This is mostly used in percentage calculations.
Finally, if only one limit is set, such as
[100]
, it is considered the min limit.