Skip to content

User interface preview web component. It can be used by demonstrating user interfaces without embedding third party providers. You can find the demo below.

Notifications You must be signed in to change notification settings

canburaks/ui-preview

Repository files navigation

UI Preview Web Component

User interface preview web component. It can be used by demonstrating user interfaces without embedding third party providers.

Demonstration

git clone https://github.com/canburaks/ui-preview.git

Get ui-preview.js file located in dist folder and put your HTML file.

Usage

<!--Load ui-preview.js file -->
<ui-preview></ui-preview>

You can provide initial values.

<ui-preview
    ui-html="<p>paragraph</p>"
    ui-css="p {color:red;}"
    ui-js=""
    >
</ui-preview>

Full demonstration of the web component.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./dist/ui-preview.js"></script>
  </head>
  <body>
    <div style="padding:5vw;">

        <ui-preview
            ui-html="<p>paragraph</p>"
            ui-css="p {color:red;}"
            ui-js=""
          >
      </ui-preview>

    </div>
  </body>
</html>

About

User interface preview web component. It can be used by demonstrating user interfaces without embedding third party providers. You can find the demo below.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages