]> piware.de Git - webcomponents.git/commitdiff
projects / webcomponents.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from: 7750b93)
patternfly-cdn: Move to importmap master
authorMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:47:26 +0000 (07:47 +0100)
committerMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:47:26 +0000 (07:47 +0100)
In theory this should fix the icon loading, but it's still broken on
esm.sh.

patternfly-cdn.html [new file with mode: 0644] patch | blob
patternfly/index.html [new file with mode: 0644] patch | blob
patternfly/package.json [new file with mode: 0644] patch | blob

diff --git a/patternfly-cdn.html b/patternfly-cdn.html
new file mode 100644 (file)
index 0000000..8150cdd
--- /dev/null
+++ b/patternfly-cdn.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>PatternFly Elements CDN example</title>
+  <meta charset="utf-8">
+
+  <style>
+    .gallery {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .gallery pf-card {
+      margin: 1rem;
+    }
+  </style>
+</head>
+
+<script type="importmap">
+{
+    "imports": {
+        "@patternfly/": "https://esm.sh/@patternfly/"
+    }
+}
+</script>
+
+<script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
+<script type="module">import "@patternfly/elements/pf-card/pf-card.js"</script>
+<script type="module">import "@patternfly/elements/pf-icon/pf-icon.js"</script>
+
+<body>
+
+<h1>PatternFly Elements CDN example</h1>
+
+<div class="gallery">
+  <pf-card>
+    <h3 slot="header">PF Card</h3>
+    <p>Some info here.</p>
+    <p slot="footer">Footer here...</p>
+  </pf-card>
+  <pf-card>
+    <h3 slot="header">Another Card</h2>
+    <p>BlaBla</p>
+  </pf-card>
+</div>
+
+<pf-icon icon="rh-cloud" size="lg"></pf-icon>
+
+<pf-button id="do_something">Do something!</pf-button>
+
+<script>
+const button_do = document.getElementById("do_something");
+button_do.addEventListener("click", () => alert("clicked"));
+</script>
+
+</body>
+</html>
diff --git a/patternfly/index.html b/patternfly/index.html
new file mode 100644 (file)
index 0000000..5f350d2
--- /dev/null
+++ b/patternfly/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>PatternFly webcomponents example</title>
+    <meta charset="utf-8">
+
+    <!-- make `import` statement work without a bundler
+    https://patternflyelements.org/docs/develop/import-maps/ and
+    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap -->
+    <script type="importmap">
+    {
+        "imports": {
+            "@patternfly/": "./node_modules/@patternfly/",
+            "@lit/": "./node_modules/@lit/",
+            "@lit/reactive-element": "./node_modules/@lit/reactive-element/reactive-element.js",
+            "@lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit": "./node_modules/lit/index.js",
+            "lit/": "./node_modules/lit/",
+            "lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit-element/": "./node_modules/lit-element/",
+            "lit-html": "./node_modules/lit-html/lit-html.js",
+            "lit-html/": "./node_modules/lit-html/",
+            "tslib": "./node_modules/tslib/tslib.es6.js"
+        }
+    }
+    </script>
+
+    <script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
+</head>
+
+<body>
+<pf-button id="do_something">Do something!</pf-button>
+
+<script>
+document.getElementById("do_something").addEventListener("click", () => alert("Clicked!"));
+</script>
+
+</body>
+</html>
diff --git a/patternfly/package.json b/patternfly/package.json
new file mode 100644 (file)
index 0000000..79c89c8
--- /dev/null
+++ b/patternfly/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "patternfly-elements-demo",
+  "version": "0.0.1",
+  "description": "PatternFly elements demo",
+  "main": "index.js",
+  "scripts": {
+    "run": "python3 -m http.server -b localhost"
+  },
+  "author": "Martin Pitt",
+  "license": "ISC",
+  "dependencies": {
+    "@patternfly/elements": "^4.0.2"
+  }
+}
webcomponents/Polymer demo