Skip to content

Instantly share code, notes, and snippets.

@wesruv

wesruv/00-load-pfe.js

Last active October 1, 2020 20:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wesruv/d9e77adc4ce81a534aa007ba0344a882 to your computer and use it in GitHub Desktop.
Save wesruv/d9e77adc4ce81a534aa007ba0344a882 to your computer and use it in GitHub Desktop.
Download ZIP
Adding PFE to Management
Raw
00-load-pfe.js
// Kyle says you don't need to what was here.
Raw
05-include-icon.js
// This is the code that will add pfe-icon, must be run after the above.
// Optimally, it's only added on pages that have a pfe-icon, but it's an extra ~5kb of JS
// include pfe-icon
chrometwo_require(["pfe", "wc"], function(pfe){
pfe.include("pfe-icon");
});
Raw
10-icon.html
<!-- HTML for the icon -->
<pfe-icon icon="rh-collaboration"></pfe-icon>
<!-- Optionally add size, you can edit them in dev tools to see it live update -->
<pfe-icon icon="rh-collaboration" pfe-size="2x"></pfe-icon>
<!--
Size and other attributes are documented here: https://github.com/patternfly/patternfly-elements/tree/master/elements/pfe-icon
If there are other style changes to this or other elements, it can be done with CSS Variables (aka CSS Custom Properties) I can help show you that too, it's pretty straightforward once you see it done.
-->
Raw
20-extra-credit.html
<!-- If you see or are worried about FOUC (Flash of unstyled content) from PFE -->
<!-- Add the unresolved property to the body tag e.g. -->
<body unresolved>
<!-- And in the head add this stylesheet -->
<link media="all" rel="stylesheet" type="text/css" href="https://access.redhat.com/webassets/avalon/j/public_modules/node_modules/@patternfly/pfelement/dist/pfelement.min.css" />
<!-- That stylesheet subtly hides the FOUC by fading in the page after the web components have rendered -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment