https://github.com/romario5/ui

Small frontend library for creating reusable UI blocks.
https://github.com/romario5/ui

frontend js library ui user-interface

Last synced: 5 months ago
JSON representation

Small frontend library for creating reusable UI blocks.

• Host: GitHub
• URL: https://github.com/romario5/ui
• Owner: romario5
• Created: 2019-09-14T22:42:40.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T22:16:46.000Z (almost 2 years ago)
• Last Synced: 2025-10-13T04:05:05.830Z (9 months ago)
• Topics: frontend, js, library, ui, user-interface
• Language: JavaScript
• Homepage:
• Size: 92.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Small frontend library for creating reusable UI blocks without any implicit magic.

The API documentation and guides will be ready later.

Please see an example below (classic todo-list).

```JavaScript

import {UI, Scheme, Styles, EventsChannel} from "ui-scheme"

import Input  from "./Input"

import Button from "./Button"

import Task   from "./Task"

class TodoList extends UI

{

    createScheme() {

        return new Scheme({

            form: new Scheme('form', {

                input: new Input(),

                createButton: new Button({text: 'Add'})

            }),

            items: 'div'

        });

    }

    addTask(name, isDone) {

        isDone = isDone === true;

        let task = new Task(name, isDone, this.channel);

        task.appendTo(this.items);

    }

    onRender() {

        this.form.on('submit', event => {

            event.preventDefault()

            let name = this.form.input.val().trim()

            if (name !== '') {

                this.addTask(name, false)

                this.form.input.val('')

            }

        });

    }

}

```

Somewhere in browser...

```HTML

    


    

        // Render todo list into corresponding div.

        new TodoList().appendTo('#todo-list');

    


```