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.

License

MIT License © valleweb