@exadel/ui-playground
Advanced tools
UIPlayground is a solution for presenting your custom components.
UIPlayground is a solution for presenting your custom components.
With the help of UIP components we allow user to 'play' with a component. You can choose from the variety of component's templates (UIP Snippets), play with the component's settings (UIP Settings) or even change its markup (UIP Editor)!
Every element (except the UIP Root) isn't required, so you can combine them the way you want.
Install UIPlayground npm dependency
npm i @exadel/ui-playground --save
Run initialization function
import {init} from '@exadel/ui-playground/esm/registration.js';
init();
Import CSS styles
@import "@exadel/ui-playground/esm/registration.css"
⚠️ Documentation is in progress. You can find more information about each element in the corresponding README.md file. ⚠️
<uip-root>
<uip-snippets class="uip-toolbar"></uip-snippets>
<script type="text/html" uip-snippet label="Logo">
<div class="logo-content gray-clr">
<img src="assets/uip-logo.png" alt="Logo">
<a class="get-started" href="{{ '/general/getting-started/'}}" data-test-msg="Get Started!"></a>
</div>
</script>
<uip-preview></uip-preview>
<uip-settings vertical resizable target=".logo-content">
<uip-text-setting label="Alternative Button Text:" target=".get-started"
attribute="data-test-msg"></uip-text-setting>
<uip-slider-setting label="Width:" target=".logo-content img"
attribute="width" min="100" max="500"></uip-slider-setting>
<uip-select-setting label="Color:" attribute="class" mode="append">
<option value="gray-clr">Dark gray</option>
<option value="blue-clr">Blue</option>
<option value="purple-clr">Purple</option>
</uip-select-setting>
</uip-settings>
<uip-editor collapsible></uip-editor>
</uip-root>
Distributed under the MIT License. See LICENSE for more information.
Exadel, Inc.
2.0.0 (2024-02-16)
jsx-dom dependency to be main dependency (instead of dev one) (b0de47d)uip-preview (50fdf15)script bollean marker replaced with source attribute (85fc641)registration.all with full import (345a32e)uip-copy plugin (38de6ba)uip-editor reworked to use latest version of CodeJar and Prism without producing side-effects (8216d2a)uip-editor plugin with self UI state management and header section support (4330698)uip-settings tag API (b4e5622)uip-header and uip-options are removed. Use uip-snippets (uip-snippets-list, uip-snippets-title),
or combine it with buttons (uip-copy, uip-theme-toggle, uip-direction-toggle)uip-options plugin removedFAQs
UIPlayground is a solution for presenting your custom components.
The npm package @exadel/ui-playground receives a total of 87 weekly downloads. As such, @exadel/ui-playground popularity was classified as not popular.
We found that @exadel/ui-playground demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.