patternfly/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>PatternFly webcomponents example</title>
   5     <meta charset="utf-8">
   6
   7     <!-- make `import` statement work without a bundler
   8     https://patternflyelements.org/docs/develop/import-maps/ and
   9     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap -->
  10     <script type="importmap">
  11     {
  12         "imports": {
  13             "@patternfly/": "./node_modules/@patternfly/",
  14             "@lit/": "./node_modules/@lit/",
  15             "@lit/reactive-element": "./node_modules/@lit/reactive-element/reactive-element.js",
  16             "@lit/reactive-element/": "./node_modules/@lit/reactive-element/",
  17             "lit": "./node_modules/lit/index.js",
  18             "lit/": "./node_modules/lit/",
  19             "lit/reactive-element/": "./node_modules/@lit/reactive-element/",
  20             "lit-element/": "./node_modules/lit-element/",
  21             "lit-html": "./node_modules/lit-html/lit-html.js",
  22             "lit-html/": "./node_modules/lit-html/",
  23             "tslib": "./node_modules/tslib/tslib.es6.js"
  24         }
  25     }
  26     </script>
  27
  28     <script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
  29 </head>
  30
  31 <body>
  32 <pf-button id="do_something">Do something!</pf-button>
  33
  34 <script>
  35 document.getElementById("do_something").addEventListener("click", () => alert("Clicked!"));
  36 </script>
  37
  38 </body>
  39 </html>