UniCoderGroup / ucon

A totally different framework of user interface with components.
MIT License
2 stars 1 forks source link
components cross-platform framework standardize ucon ui visualize

UCON framework

GitHub Workflow Status GitHub last commit GitHub Translated CodeFactor Join the chat at https://gitter.im/ucon-project/community

Overview

Response a request

UCON is a Node.js super framework for I/O in terminals.

It is designed to make I/O in terminals Visualize, Componentize and Standardize.

As a framework, UCON also provides useful standard components, such as ProgressBar and Table etc.

It is also convenient to create a component on your own, because the design of UCON and the features of terminals. The implementation of a component generally does not need to exceed 50 lines.

Developed by UniCoder Group. DESIGNED IN CHINA.

Visualize

Converts plain text output into a graphic of characters.

Componentize

Each output can be composed of components.

This borrows from the designs of front-end frameworks.

An introduction to components

Standardize

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. [^1]

Component categories

In UCON, components are divided into three categories: BlockComponent, InlineComponent and ContainerComponent

BlockComponent

BlockComponents occupy one or more lines without listening for input.

Usage
  1. Create an instance through new
  2. Call mount to mount it to the newest line
  3. You can call other methods to modify the content of it
Example
let pb = new ucon.ProgressBar({
    name: "test"
})......
Warnings

InlineComponent

InlineComponents render part of a line according to the arguments.

Usage

Call Name([Params][,...Contents]), which returns an instance.

Example
ucon.ucon.log("This book is ", ucon.Italitic("Harry Potter"), ".");
Warnings

ContainerComponent

ContainerComponents process all the outputs while they are registered.

Usage
  1. Create an instance through new
  2. Call begin to output the beginning and register it
  3. Output things that should be processed by it through ucon.log
  4. Call end to unregister it and output the ending
Example
let group = new ucon.Group();
......
Warnings

Component development

[TODO]

[^1]: https://reactjs.org/docs/components-and-props.html, Introduction