Live Codepen Example

Installation

Script tag

• Put two script tags similar to this in the head of your index.html:

<script
  type="module"
  src="https://unpkg.com/@paraboly/pwc-simple-card@latest/dist/pwc-simple-card/pwc-simple-card.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/@paraboly/pwc-simple-card@latest/dist/pwc-simple-card/pwc-simple-card.js"
></script>

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/pwc-simple-card --save
• Put a script tag similar to this <script src='node_modules/@paraboly/pwc-simple-card/dist/pwc-simple-card.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 @paraboly/pwc-simple-card --save
• Add an import to the npm packages import @paraboly/pwc-simple-card;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Basic Usage

This is just an example from pwc-simple-card, you need to change it!

<pwc-simple-card
  card-title="Lorem Ipsum?"
  card-details="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ultricies dui, sed varius ipsum."
></pwc-simple-card>

JS Way

This is just an example from pwc-simple-card, you need to change it!

const pwcSimpleCard = document.querySelector("pwc-simple-card");
pwcSimpleCard.source = require("assets/your-img");

Future Plans

• Documentation
• Dark Theme

Authors

Mert Uslu, u.mertuslu@gmail.com

License

WebComponent PWC SimpleCard is available under the MIT license.

See the LICENSE file for more info.