Fully Styled UI Component Library – PCUI

Preview:

Description:

PCUI is a fully styled UI component library for Vanilla JavaScript and React apps.

It provides a quick and stylish way to create reusable UI components in modern web & mobile design.

UI Components Included:

• Boolean Input
• Button
• Code
• Container
• Divider
• InfoBox
• Label
• Numeric Input
• Overlay
• Panel
• Progress
• Select Input
• Slider Input
• Spinner
• TextArea Input
• Text Input
• TreeView
• Vector Input

Basic Usage:

1. Install the PCUI package with NPM.

# NPM
$ npm i @playcanvas/pcui --save

2. Import UI components.

// Vanilla JavaScript
import { Component } from '@playcanvas/pcui/pcui.js';

// React
import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from '@playcanvas/pcui/pcui-react.js';

// Data binding
import {
BindingObserverToElement,
BindingElementToObserver,
BindingTwoWay,
Observer
} from '@playcanvas/pcui/pcui-binding.js';

3. Use these UI components in your app.

<BooleanInput onChange={function noRefCheck(){}} />
...

Previews:

Boolean Input

Info Box

Panel

Tree View

Textarea

Changelog:

v1.1.5 (01/05/2021)

• Removed the montserrat font from the PCUI build. Custom font’s can now be included via the font css classes

v1.1.4 (12/23/2020)

• Change how history combine works for NumericInput and SliderInput
• Change SliderInput handle behavior which fixes an undo / redo bug and removes the accumulator logic in favor of allowing a small initial offset between the cursor and the handle.

v1.1.3 (12/21/2020)

• Fix subarray panels

v1.1.2 (12/21/2020)

• Various fixes to ArrayInput
• Use Element.register for all components
• Fix defaults for TreeView storybook

v1.1.1 (12/18/2020)

• Initialize Container values that default to false so that we avoid an unnecessary property setter for scrollable, flex, grid properties

v1.1.0 (12/17/2020)

• Support for the TreeView and TreeViewItem components
• Support for the ArrayInput component
• The TextAreaInput component can now be set to resizable
• Fixed references to the BindingObserversToElement and BindingElementToObservers classes
• The ContextMenu now exposes its trigger element
• Fixed the handle position

v1.0.8 (12/16/2020)

• Fix the handle position

v1.0.8 (11/12/2020)

• Fix slider handle on zero

v1.0.5 (10/31/2020)

• Include pcui-hidden in pcui-react build

v1.0.4 (10/29/2020)

• update the default numeric input precision to 7

v1.0.3 (10/26/2020)

• Expose the ContextMenu component