--- /dev/null
+<!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>
--- /dev/null
+<!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>
--- /dev/null
+{
+ "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"
+ }
+}
projects / webcomponents.git / commitdiff