Installation

Install UIPlayground npm dependency:

npm i @exadel/ui-playground --save

Project structure

UIP components are organized in the following way:

Core Elements

• UIP Root
• UIP Preview

Plugins

• UIP Editor
• UIP Settings and Setting
  • UIP Text Setting
  • UIP Bool Setting
  • UIP Select Setting
• UIP Snippets
  • UIP Snippets Title
  • UIP Snippets List
• UIP Theme Toggle
• UIP Note
• UIP Copy
• UIP Text Direction Toggle

---

UIPlayground must have at least Сore components. Plugins are optional, you can add them on your own free will.

To implement custom UIPlayground components, see UIPPlugin.

Modules/components imports

To register all components, you can use the next callback:

import {init} from '@exadel/ui-playground/esm/registration';
init();

There is also an ability to register only Core/Plugins/Settings parts. To do this, call one of the functions below:

import {registerCore, registerPlugins, registerSettings} from '@exadel/ui-playground/esm/registration';
registerCore();
registerPlugins();
registerSettings();

The callbacks above register UIP components by themselves. But if you want to have a custom registration logic, there is a way to register components manually:

import {UIPRoot} from '@exadel/ui-playground/esm/registration';
UIPRoot.register();

Every module has two versions of styles: css and less. If you want to import styles for all UIP component, you can import either registration.less or registration.css file:

@import '@exadel/ui-playground/esm/registration.css';

Browser support

UIPlayground supports all modern browsers.