Input

Table of contents

Installation

NPM

npm i @ppci-mock/custom-input

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

Usage

Javascript

import '@ppci-mock/custom-input'

Browser

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

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

<!-- Component -->
<custom-input
  type=${String}
  name=${String}
  label=${String}
  placeholder=${String}
  @change=${Function}
  @change-delayed=${Function}
  ?checked=${Boolean}
></custom-input>

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 {
  --input-padding: 8px 16px;
  --input-border: 1px solid #eeee;
  --input-border-radius: 8px;
  --input-color: gray;
  --input-background: white;
  --input-placeholder-color: gray;
  --input-focus-border: 1px solid blue;
}

Properties

Events

  The value in the response reflects the current state of the input field.
</td>
<td>```{ name: 'firstname', value: 'p' }```</td>

  This could be useful to prevent too many network requests on a search box.
</td>
<td>```{ name: 'firstname', value: 'powerpeers' }```</td>