minimalist-components / mn-select

A select component to desktop and mobile devices

mn-select

Minimalist select component, agnostic to framworks.

See the demo

Install

npm install --save mn-select

And bundle dependencies and main files in dist/ with your preferred tool.

Usage

just use the tag mn-select and option, e.g.

<mn-select>
  <option value="#fff">White</option>
  <option value="#000">Black</option>
</mn-select>

To begin with an value, you can use the attribute selected in tag option

<mn-select>
  <option value="#fff">White</option>
  <option value="#000" selected>Black</option>
</mn-select>

Or just use the attribute value in mn-select

<mn-select value="#fff">
  <option value="#fff">White</option>
  <option value="#000">Black</option>
</mn-select>

If you want set the value from javascript, just assign a value to property .value, e.g.

document.querySelector('mn-select').value = '#000'

The following attributes from image are supported in this mn-select

• value
• placeholder
• id
• name

and in option

• value
• selected

mn-select's Issues

fix errors to angular

the render of angular, occurs after html render, so, the set value of this components is called twice, and an error occur

because, assign value, validate if has an option with value correspondent (options has values={{ databind here }})

so, I need found a way to fix this warn

adjust arrowkeys navigation

has a bug, jump in elements, need to be fixed

adjust events to keypress esc

some conflicts existings right now, e.g.

has a dialog opened
inside a dialog, has a select
when I open select, and press esc, the select opened need to be closed
the dialog closes too, what is a bad thing