@exadel/ui-playground NPM

UIPlayground

Note: Project is under development

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.

npm.io

UIP elements:

Core
Components

Example:

<uip-root>
  <uip-options label="Options:"></uip-options>
  <uip-snippets label="Snippets">
    <template uip-snippet label="Users list">
      <div class="user-list">
        <div class="user-block aqua-user">Alexander</div>
        <div class="user-block aqua-user">Alexey</div>
        <div class="user-block aqua-user">Marina</div>
      </div>
    </template>
    <template uip-snippet label="Long users list" wrap-items>
      <div class="user-list">
        <div class="user-block red-user">Anton</div>
        <div class="user-block red-user">Dmitri</div>
        <div class="user-block red-user">Alexandra</div>
        <div class="user-block red-user">Artem</div>
        <div class="user-block red-user">Marina</div>
        <div class="user-block red-user">Alexander</div>
        <div class="user-block red-user">Alexander</div>
      </div>
    </template>
  </uip-snippets>
  <uip-preview label="Preview"></uip-preview>
  <uip-settings label="Settings" target=".user-list">
    <uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
      <option value="red-user">Red</option>
      <option value="aqua-user">Aqua</option>
      <option value="green-user">Green</option>
    </uip-select-setting>
    <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
  </uip-settings>
  <uip-editor label="Editor"></uip-editor>
</uip-root>