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 pf-card {
  14       margin: 1rem;
  15     }
  16   </style>
  17 </head>
  18
  19 <script type="importmap">
  20 {
  21     "imports": {
  22         "@patternfly/": "https://esm.sh/@patternfly/"
  23     }
  24 }
  25 </script>
  26
  27 <script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
  28 <script type="module">import "@patternfly/elements/pf-card/pf-card.js"</script>
  29 <script type="module">import "@patternfly/elements/pf-icon/pf-icon.js"</script>
  30
  31 <body>
  32
  33 <h1>PatternFly Elements CDN example</h1>
  34
  35 <div class="gallery">
  36   <pf-card>
  37     <h3 slot="header">PF Card</h3>
  38     <p>Some info here.</p>
  39     <p slot="footer">Footer here...</p>
  40   </pf-card>
  41   <pf-card>
  42     <h3 slot="header">Another Card</h2>
  43     <p>BlaBla</p>
  44   </pf-card>
  45 </div>
  46
  47 <pf-icon icon="rh-cloud" size="lg"></pf-icon>
  48
  49 <pf-button id="do_something">Do something!</pf-button>
  50
  51 <script>
  52 const button_do = document.getElementById("do_something");
  53 button_do.addEventListener("click", () => alert("clicked"));
  54 </script>
  55
  56 </body>
  57 </html>