patternfly-cdn.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <title>PatternFly Elements CDN example</title>
   5   <meta charset="utf-8">
   6
   7   <style>
   8     .gallery {
   9       display: flex;
  10       flex-direction: row;
  11     }
  12
  13     .gallery pfe-card {
  14       margin: 1rem;
  15     }
  16   </style>
  17 </head>
  18
  19 <script type="module" src="https://unpkg.com/@patternfly/pfe-card@next?module"></script>
  20 <script type="module" src="https://unpkg.com/@patternfly/pfe-button@next?module"></script>
  21
  22 <body>
  23
  24 <h1>PatternFly Elements CDN example</h1>
  25
  26 <div class="gallery">
  27   <pfe-card>
  28     <h2 slot="header">PF Card</h2>
  29     <p>Some info here.</p>
  30     <p slot="footer">Footer here...</p>
  31   </pfe-card>
  32   <pfe-card>
  33     <h2 slot="header">Another Card</h2>
  34     <p>BlaBla</p>
  35   </pfe-card>
  36 </div>
  37
  38 <pfe-icon icon="rh-cloud"></pfe-icon>
  39
  40 <pfe-button> <!-- icon="rh-cloud" doesn't work -->
  41   <button id="do_something">Do something!</button>
  42 </pfe-button>
  43
  44 <script>
  45 const button_do = document.getElementById("do_something");
  46 button_do.addEventListener("click", () => alert("clicked"));
  47 </script>
  48
  49 </body>
  50 </html>