JLayout

It uses the LUME Kiwi library to do the actual constraint on layout.

Example

    <div component-name="container">
        <div component-name="subcontainer">
        </div>
    </div>

function keyGen(key) {
    return `[component-name="${key}"]`
}
const container = new JLayout({
    root: document.querySelector(keyGen('container')),
    getChild(root, component) {
        return root.querySelector(keyGen(component));
    },
});
container.setConstraint([
    {
        "component": "subcontainer",
        "left": [
            "=0"
        ],
        "right": [
            "=0"
        ],
        "top": [
            "=0"
        ],
        "height": [
            "=subcontainer.width*0.781"
        ]
    }
])
container.reflow();
container.scheduleResize();

Documentation

• JLayout
• Documentation
  • Constraint Dimension
  • Constraint DSL
  • Constraint pattern
• API Documentation
  • JLayout
    • new JLayout(configs)
    • jlayout.setConstraint(constraints)
    • jlayout.reflow()
    • jlayout.scheduleResize()

Constraint Dimension

• left
• right
• top
• bottom
• width (Supports "intrisic")
• height (Supports "intrisic")
• centerX
• centerY

Constraint DSL

constraint = <RelationExpression>

<RelationExpression> = <Relation> <Expression>

<Relation> = "=" | ">=" | "<="

<Expression> = <part>(<operator><part>)*

<operator> = "+" | "-" | "*" | "/"

<part> = <ParentViewAttribute> | <ViewAttribute> | Number

<ParentViewAttribute> = "|"

<ViewAttribute> = <ViewName>.<dimension>

<ViewName> = String

<dimension> = "left" | "right" | "top" | "bottom" | "width" | "height" | "centerX" | "centerY"

Constraint pattern

• constraint
  • component: String (element identifier)
  • [dimension]: Array<constraint> | "intrisic"

"intrisic": The dimension is determined by the interior of the component

API Documentation

JLayout

The layout control class.

new JLayout(configs)

Construct a new JLayout.

• configs
  • root: Element,
  • getChild(root: Element, component: String): Element

jlayout.setConstraint(constraints)

Set constraint on layout.

• constraints: Array<Constraint>

jlayout.reflow()

Apply constraints.

jlayout.scheduleResize()

Apply transform on time.

jlayout.setConstraintOnView(name, dimension, constraint)

Set constraint on element in layout.

• name: String // element identifier
• dimension: [Dimension]
• constraint: Constraint