Widget

Abstract UI element drawn over a background shape and holding a value. Input, ProgressBar and ProgressPie extend it.

Examples

import { Widget, Rectangle } from "pencil.js";

class Gauge extends Widget {
    #value = 0;

    constructor (position, options) {
        // Use Rectangle to draw the background
        super(position, Rectangle, options);
        this.value = this.options.value;
    }

    get width () {
        return 100;
    }

    get height () {
        return 10;
    }

    get value () {
        return this.#value;
    }

    set value (value) {
        this.#value = value;
    }
}

WidgetOptions

Inherit from ComponentOptions.

Name	Type	Default	Comment
value	Any	null	Initial value
foreground	Color or String	"#444"	Color of the filling
fill	Color or String	"#f6f6f6"	Color of the background
stroke	Color or String	"#aaa"	Color of the border