valle-select
Awesome valle-select - Web Component using Polymer 3
How to install and use:
1 - Install the element using Yarn:
$ yarn add @valle/valle-select
2 - Import the element:
<script type="module" src="node_modules/@valle/valle-select/valle-select.js"></script>
or in your javascript file
import "@valle/valle-select/valle-select.js";
3 - Start using it!
<valle-select label="Names" helpertext="Choose your name">
<valle-option value="option 1">Example 1</valle-option>
<valle-option value="option 2">Example 2</valle-option>
<valle-option value="option 3">Example 3</valle-option>
</valle-select>
<valle-select>
Properties
Property | Type | Default | Description |
---|---|---|---|
label |
String | "" |
Default label |
disabled |
Boolean | false |
Disabled state |
required |
Boolean | false |
Required validate |
helpertext |
String | "" |
Description text for help |
errortext |
String | "" |
Error message |
placeholder |
String | "" |
Default placeholder |
error |
Boolean | false |
Error state |
open |
Boolean | false |
Open state |
autofocus |
Boolean | false |
Default autofocus |
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-select-color | rgba(5, 159, 183, .87) |
Primary color |
--valle-input-width | 100% |
Select width |
--icon-tooltip-color | #000 |
Icon tooltip color |
API
The following properties are available via javascript:
Property | Type | Description |
---|---|---|
value | String |
Selected value from option content |
data-valle-value | String |
Selected value from option value |
disabled | Boolean |
Disabled state |
options | Array |
All valle-options available |
open | Boolean |
Open state |
error | Boolean |
Error state |
current | Object |
Selected valle-options
|
<valle-option>
Properties
Property | Type | Default | Description |
---|---|---|---|
selected |
Boolean | false |
Selected state |
value |
String | "" |
Default value |
Browser Support
Using the webcomponents.js:
Latest |
Latest |
Latest |
Latest |
11+ | Latest |
Development
1 - Verify if you have node and yarn installed.
2 - Install Polymer-CLI:
$ [sudo] yarn global add polymer-cli
3 - Install local dependencies:
$ yarn
4 - Start the development server:
$ yarn start
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.