@ppci/custom-button

Button

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties
5. Events

Installation

NPM

npm i @ppci/custom-button

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/custom-button'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-button/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/pie-chart/builds/legacy.min.js" />

<!-- Component -->
<custom-button
  name=${String}
  @click=${Function}
  ?loading=${Boolean}
></custom-button>

Styling

We have a predefined powerpeers theme ready for you! Just add the theme-powerpeers boolean attribute to your custom-button.

<custom-button
  theme-powerpeers>
</custom-button>

Not completely satisfied with our powerpeers theme? Well you can do it yourself. We have a set of css variables available for you.

custom-button {
  --background-color: white;
  --color: gray;
  --theme-spacing: 16px;
  --border-radius: 0px;
  --border: 1px solid silver;

  --hover-background-color: gray;
  --hover-color: black;
  --hover-border: black;
}

Properties

Property	Type	Description	Possible Values
*name*	string	Name of the input field. Which could be used in a form as field identifier.	first name, surname, email, etc.
loading	boolean	Show or hide loading indicator	```html ```
Theme
theme-powerpeers	boolean	Apply predefined powerpeers theme	```html ```

Events

Name	Description	Payload
@click	Default browser click event	```{ target: ..., currentTarget: ..., ... }```