Skip to content

Latest commit

 

History

History
106 lines (87 loc) · 4.57 KB

README.md

File metadata and controls

106 lines (87 loc) · 4.57 KB
Raw

UIPlayground


npm version build License

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.

Installation

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";

UIP elements

Example

Example

<uip-root>
  <script type="text/html" uip-snippet label="Logo">
    <div class="logo-content gray-clr">
      <a class="get-started" href="{{ '/general/getting-started/' | url }}"><span>Get Started with</span>
        <div><svg width="100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 268 268">
            <circle cx="135" cy="134" r="116" fill="none" stroke-width="10"/>
            <path d="M91.308 106.971 64.53 133.749l26.95 26.949a8 8 0 0 1-11.315 11.314l-32.508-32.509a8 8 0 0 1 0-11.313c.418-.418.87-.78 1.348-1.086a8.028 8.028 0 0 1 1.37-1.827l29.62-29.62a8 8 0 0 1 11.313 11.314ZM157.992 110.124l-13.856-8-30 51.962 13.856 8 30-51.962ZM113.136 155.818l13.856 8-14.928 9.856 1.072-17.856ZM158.064 94a8 8 0 0 0-10.928 2.928l-2 3.464 13.856 8 2-3.464A7.999 7.999 0 0 0 158.064 94ZM221.124 140.564a8 8 0 0 0 1.348-12.398l-32.509-32.51a8 8 0 0 0-11.314 11.315l26.95 26.949-26.778 26.778a8 8 0 0 0 11.313 11.314l29.621-29.62a8.007 8.007 0 0 0 1.369-1.828Z"/>
          </svg>
        </div>
      </a>
    </div>
  </script>
  <uip-preview class="fill center-alignment"></uip-preview>
  <uip-settings resizable collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
    <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="50" max="150"></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 copy></uip-editor>
</uip-root>

Roadmap

  • More demo content
  • UIPNote: design improvement and technical support to store a note (any HTML content) associated with snippet

License

Distributed under the MIT License. See LICENSE for more information.

Exadel, Inc.