Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@valle/valle-select

1.3.0 • Public • Published

valle-select

Awesome valle-select - Web Component using Polymer 3

npm Published on webcomponents.org

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:

Chrome Opera Firefox Safari IE Edge
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

Install

npm i @valle/valle-select

DownloadsWeekly Downloads

57

Version

1.3.0

License

MIT

Unpacked Size

65.4 kB

Total Files

17

Last publish

Collaborators

  • avatar
  • avatar