Stencil Web Components

• This project contains the following web components ready to be used in any framework:

• jp-pancho-card: a useful interactive card component with decent animation that can be loaded with any content.

click on this Demo Link to view it in action!

Installation

Each framework has its own way of installing and using a web component:

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/jp-pancho@0.0.6/dist/jp-pancho.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install jp-pancho --save
• Put a script tag similar to this <script src='node_modules/jp-pancho/dist/jp-pancho.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install jp-pancho --save
• Add an import to the npm packages import jp-pancho;
• Then you can use the element anywhere in your template, JSX, html etc

Using the jp-pancho-card component

Simply add in your html the following:

<jp-pancho-card 
  card-title="My Card Title" 
  is-card-toggled="true" 
  can-close-card="true" 
  can-refresh-card="true" 
  show-card-options="true"
  is-option-togglable="true">

  YOUR HTML CONTENT

</jp-pancho-card>

You can also add listeners to the CLOSE and REFRESH events that are triggered when the top right header icons are clicked ( the close and refresh icons), so that you will be able to do something in your parent page.

document.addEventListener("onCardClose",cardCloseCallBack);
document.addEventListener("onCardRefresh",cardRefreshCallBack);