]> piware.de Git - webcomponents.git/commitdiff
Add PatternFly Elements CDN demo
authorMartin Pitt <martin@piware.de>
Wed, 31 Aug 2022 20:04:48 +0000 (22:04 +0200)
committerMartin Pitt <martin@piware.de>
Wed, 31 Aug 2022 20:19:32 +0000 (22:19 +0200)
patternfly-cdn.html [new file with mode: 0644]

diff --git a/patternfly-cdn.html b/patternfly-cdn.html
new file mode 100644 (file)
index 0000000..0af4993
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>PatternFly Elements CDN example</title>
+  <meta charset="utf-8">
+
+  <style>
+    .gallery {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .gallery pfe-card {
+      margin: 1rem;
+    }
+  </style>
+</head>
+
+<script type="module" src="https://unpkg.com/@patternfly/pfe-card@next?module"></script>
+<script type="module" src="https://unpkg.com/@patternfly/pfe-button@next?module"></script>
+
+<body>
+
+<h1>PatternFly Elements CDN example</h1>
+
+<div class="gallery">
+  <pfe-card>
+    <h2 slot="header">PF Card</h2>
+    <p>Some info here.</p>
+    <p slot="footer">Footer here...</p>
+  </pfe-card>
+  <pfe-card>
+    <h2 slot="header">Another Card</h2>
+    <p>BlaBla</p>
+  </pfe-card>
+</div>
+
+<pfe-icon icon="rh-cloud"></pfe-icon>
+
+<pfe-button> <!-- icon="rh-cloud" doesn't work -->
+  <button id="do_something">Do something!</button>
+</pfe-button>
+
+<script>
+const button_do = document.getElementById("do_something");
+button_do.addEventListener("click", () => alert("clicked"));
+</script>
+
+</body>
+</html>