@ppci-test/custom-input v0.0.0

Input

A custom input field

Table of contents

Installation

CDN

  <script src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

NPM

  npm i @ppci/custom-input

Usage

// Javascript import
import '@ppci/custom-input'
// or module import
<script type="module" src="http://developer.powerpeers.com/social/1.0.0/custom-input.js" />

const onChange = (event) => {
  const { name, value } = event.detail;
}

const onChangeDelayed = (event) => {
  const { name, value } = event.detail;
}

<custom-input
  name='firstname'
  placeholder='First name'
  @change="${onChange}"
  @change-delayed='${onChangeDelayed}'>
</custom-input>

Theme | Styling

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

<custom-input
  theme-powerpeers>
</custom-input>

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

custom-input {
  /* todo */
}

Properties

Events

Changelog

1.0.1 ( Patch )

• Firefox style bug fix

1.0.0 ( Major )

• Initial version of the custom input field.