Source Edit Form
A source edit form
Table of contents
Installation
CDN
<script type='module' src="http://developer.powerpeers.com/social/1.0.0/custom-button.js" />
NPM
npm i @ppci/custom-button
Usage
// Javascript import
import '@ppci/custom-button'
<!-- or module import -->
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-button.js" />
const onClick = (event) => {
// place click logic here
}
<custom-button
name="firstname"
loading
theme-powerpeers
@click=${onClick}>
</custom-button>
Theme | 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 | Detail / Payload |
@click | Default browser click event | ```{ target: ..., currentTarget: ..., ... }``` |
Changelog
1.0.0 ( Major )
- Initial version of the custom button.