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

MIT License © valleweb