@valle/valle-input v2.9.0
valle-input
Awesome valle input element - web component using Polymer 3x
How to install and use:
1 - Install the element using Yarn:
$ yarn add @valle/valle-input
2 - Import the element:
<script type="module" src="./node_modules/@valle/valle-input/valle-input.js"></script>
or in your javascript file
import '@valle/valle-input/valle-input.js';
3 - Start using it!
<valle-input label="Name" placeholder="Adam Sandler" helpertext="Full name"></valle-input>
Properties
Property | Type | Default | Description |
---|---|---|---|
label | String | "" | Default label |
type | String | text | Input type |
validateby | String | "" | Type for validate (available: name ) |
placeholder | String | "" | Default placeholder |
helpertext | String | "" | Description text for help |
errortext | Srting | "" | Error message |
pattern | String | "" | RegExp for validate |
value | String | "" | Input value |
error | Boolean | false | Error state |
required | Boolean | false | Required validate |
disabled | Boolean | false | Disabled state |
autofocus | Boolean | false | Default autofocus |
step | Number | 0 | Custom step for number inputs |
tooltip | String | "" | A tooltip for inputs |
tooltippos | String | "" | Tooltip position (available: top-right ) |
tooltiplength | String | "" | Tooltip length (available: small , medium and large ) |
Styling
The following custom properties and mixins are available for styling:
Custom property | Default | Description |
---|---|---|
--valle-input-color | rgba(5, 159, 183, .87) | Primary color |
--valle-input-width | 100% | Input Width |
--icon-tooltip-color | #000 | Icon tooltip color |
Browser Support
Using the webcomponents.js:
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔ |
Development
1 - Install Yarn & Polymer-CLI:
$ [sudo] yarn global add polymer-cli
2 - Install local dependencies:
$ yarn
3 - Start the development server:
$ yarn start
Go to localhost:8080/components/valle-input/
Tests
Unit tests
Run tests:
$ yarn test
Versioning
To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.
Contributing
Find on our issues the next steps of the project ;) Want to contribute? Follow these recommendations.
History
See Releases for detailed changelog.
License
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago