Views Integration

Items can be attached to XHTML elements.

To connect Item with View elements, specify document.query as CSS Selector. All matched tags will be styled.

<style>
Rectangle {
    document.query: 'button.bigButton'
    width: 50
    height: 50
    color: 'red'
}
</style>
<button class="bigButton" />
<button class="bigButton" />

Matched Virtual DOM Tag is accessible in styles as document.node. You can use it in properties.

<style>
Item {
    document.query: 'enemy'
    width: this.document.node.props.health * 100
    // width is equal 80
}
</style>
<enemy health="0.8" />

document.query can be also attached to children.

Only the first matched child Tag can be styled.

Now you can create complex custom elements based on more than one HTML element.

<style>
Item {
    document.query: 'avatar'

    Text {
        document.query: '> nick'
    }
}
</style>
<avatar>
    <nick>User Nick</nick>
</avatar>

Inline Styles

You can refer to Item (styles) directly from Virtual DOM tag.

Each styled Tag has style prop pointing at created Item.

You can use it to define inline styles in XHTML.

<style>
Item {
    document.query: 'button'
}
</style>
<button style:width="200" />

Using Inline Styles you can attach also to signals.

<style>
Item {
    document.query: 'button'
}
</style>
<script>
this.onCreate(function () {
    this.onButtonClick = (event) => {};
});
</script>
<button style:pointer:onClick="${this.onButtonClick}" />

results matching ""

    No results matching ""