@matukin/ts-ui-widgets

Collection of TypeScript UI widgets

A library of user interface elements for use in TypeScript without frameworks. In fact, it is a set of classes for quickly creating panels, buttons and other elements.

The elements have built-in simple styles by default, but you can assign/add your own.

Documentation and articles: https://gitverse.ru/Mativ/ts-ui-widgets/content/master/doc/index.md

Install

npm install @matukin/ts-ui-widgets

Documents

• Full documents
• Roadmap
• Patchnote

Quick start

import { ButtonWidget, DivWidget, LabelWidget } from "@matukin/ts-ui-widgets";

window.addEventListener("load", () => {

    // create HTMLElement "div" with class=="MyPanelStyle"
    const panel = new DivWidget("MyPanelStyle");

    // create label with text "Hello Widget !"
    const label = new LabelWidget("Hello Widget !");
    // put label to div
    panel.add(label);

    // add button
    const btn = new ButtonWidget("click me");
    btn.onclick = () => {
        window.alert("me button clicked !");
    };
    panel.add(btn);

    // append "div" to document body
    document.body.append(panel.element);
});

Quick start result in browser: