Button
Table of contents
Installation
NPM
npm i @ppci-mock/custom-button
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci-mock/custom-button'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-button/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/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: ..., ... }``` |