kylebuch8

<template>
  <div>
    <h1>PatternFly Elements with Vue</h1>
    <pfe-card color="lightest" border>
      <img
        alt="From https://picsum.photos/"
        overflow="left right top"
        src="https://picsum.photos/id/1019/300/200"
      >
      <p>

kylebuch8

function App() {
  const accordion = useRef();

  useEffect(() => {
    
  });

  return (
    <div className="App">
        <h1>PatternFly Elements with React</h1>

kylebuch8

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Why do wizards need money if they could just create it?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>
      There is legislation that decides what you can conjure and what you can
      not. Because things that you conjure out of thin air will not last, it
      is illegal in the wizarding world.
    </p>

kylebuch8

function App() {
  return (
    <div className="App">
      <h1>PatternFly Elements with React</h1>
      <pfe-card color="lightest">
        <img
          alt="From https://picsum.photos/"
          overflow="left right top"
          src="https://picsum.photos/id/1019/300/200"
        />

kylebuch8

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Why do wizards need money if they could just create it?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>
      There is legislation that decides what you can conjure and what you can
      not. Because things that you conjure out of thin air will not last, it
      is illegal in the wizarding world.
    </p>

kylebuch8

<h1>Angular App with PatternFly Elements</h1>
<pfe-card color="lightest" border>
  <img
    alt="From https://picsum.photos/"
    overflow="left right top"
    src="https://picsum.photos/id/1019/300/200"
  />
  <p>This is the light pfe-card and <a href="#">a link</a>.</p>
  <p>
    Leverage agile frameworks to provide a robust synopsis for high level

kylebuch8

// the location of pfelement.js may be different if you're not building an element in the
// PatternFly elements repository
import PFElement from "../pfelement/pfelement.js";

class MySimplePfelement extends PFElement {
  constructor() {
    // make sure we call super() first with the class we're using
    // as the first argument
    
    // the second argument in super() is an object with delayRender: true

kylebuch8

// the location of pfelement.js may be different if you're not building an element in the
// PatternFly elements repository
import PFElement from "../pfelement/pfelement.js";

class MySimplePfelement extends PFElement {
  constructor() {
    // make sure we call super() first with the class we're using
    // as the first argument
    super(MySimplePfelement);
    

kylebuch8

class SimpleComponent extends HTMLElement {
 constructor() {
  // calling super first
  super();
  
  // setting some initial state
  this.counter = 0;
  this.active = false;
  
  // adding an event listener

kylebuch8

import PFElement from "../pfelement/pfelement.js";

class MyPfelement extends PFElement { 
 constructor() {
  // you must call this first
  super(MyPfelement); 
 }
}