Styles

Styles are used to:

  • draw shapes and texts on a screen,
  • support user actions like mouse clicks, taps, keyboard events,
  • organize elements in a hierarchical structure,
  • do animations.

Styles are connected and synchronized with views. You can style any XHTML element.

Styles in views needs to be placed inside <style></style> tag.

NML

Neft uses his own language for styles. It's called NML - Neft Marked Language.

Neft styles compared to CSS are:

  • type based (different types have different properties),
  • object-oriented (e.g. Animation is a child),
  • independent (items don't have to be connected to a view or Virtual DOM),
  • fully dynamic (scripted in JavaScript with auto-binding).

Syntax

Look at example below to understand the syntax:

<style>
Item {
    x: 50
    width: 100
    // comment
}
</style>
  • Item - name of a type to use; Item is a base class for all visual types,
  • x - left position in pixels,
  • width - width in pixels.

Scripting

Properties can contains JavaScript code.

<style>
Item {
    x: 50
    width: this.x * 2
    // width is equal 50
    rotation: Math.PI / 4
}
</style>

width property is auto-bounded to the x property. It means, width value will be automatically updated on each x property change.

Shapes

To draw a rectangle, use Rectangle item.

It extends Item.

<style>
Rectangle {
    width: 50
    height: 50
    color: 'red'
}
</style>

Children

Item can contains children.

Their position is relative to parent.

Parent element is available in properties as this.parent or just parent.

<style>
Rectangle {
    width: 50
    height: 50
    color: 'red'

    Rectangle {
        width: this.parent.width / 2
        // width is equal 25
        height: 10
        color: 'green'
    }
}
</style>

ids

Each element can has a unique id.

It's used to reference this item from other places.

<style>
Item {
    Item {
        id: firstItem
        x: 10
    }

    Item {
        x: firstItem.x
        // x is equal 10
    }
}
</style>

Signal handlers

Item produces signals on properties change (e.g. onWidthChange) or user events (e.g. pointer.onClick).

You can create JavaScript function directly in NML.

<style>
Rectangle {
    query: 'button'
    pointer.onClick: function (event) {
        console.log(event.x);
    }
}
</style>
<button />

Native Items

Neft has some built-in native elements.

You can access them using the native-items extension.

NML allows to write JavaScript code before types. You need to wrap it in back-ticks like in Markdown.

<style>
`
const NativeItems = require('extensions/native-items');
`
NativeItems.Button {
    query: 'button'
}
</style>
<button>Click here</button>

results matching ""

    No results matching ""