--- /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 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>
--- /dev/null
+<html>
+<head>
+ <title>PatternFly webcomponents example</title>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.min.css">
+ <link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">
+
+ <script src="//rawgit.com/webcomponents/custom-elements/master/src/native-shim.js"></script>
+ <script src="node_modules/patternfly-webcomponents/dist/js/pf-alert.js"></script>
+</head>
+
+<body>
+
+<h1>Alert</h1>
+
+<pf-alert type="success">Success Alert message.</pf-alert>
+
+
+</body>
+</html>
--- /dev/null
+{
+ "name": "patternfly-webcomponents-demo",
+ "version": "0.0.1",
+ "description": "PatternFly webcomponents demo",
+ "main": "index.js",
+ "scripts": {
+ "run": "python3 -m http.server -b localhost"
+ },
+ "author": "Martin Pitt",
+ "license": "ISC",
+ "dependencies": {
+ "patternfly-webcomponents": "^0.3.0"
+ }
+}
projects / webcomponents.git / commitdiff