1.4.8 • Published 4 years ago
@ppci/custom-input v1.4.8
Input
Table of contents
Installation
NPM
npm i @ppci/custom-input
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
Usage
Javascript
import '@ppci/custom-input'
Browser
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/custom-input/builds/index.min.js" />
<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/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
1.4.8
4 years ago
1.4.7
4 years ago
1.4.6
4 years ago
1.4.5
4 years ago
1.4.4
4 years ago
1.4.3
5 years ago
1.4.2
5 years ago
1.4.0
5 years ago
1.3.15
5 years ago
1.3.14
5 years ago
1.3.13
5 years ago
1.3.12
5 years ago
1.3.10
5 years ago
1.3.9
5 years ago
1.3.8
5 years ago
1.3.7
5 years ago
1.3.6
5 years ago
1.3.5
5 years ago
1.3.4
5 years ago
1.3.3
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago