@nekodev/modernselect v1.0.5
Modern Select
Example : modern-select/demo/index.html
installation
Download the zip and include build files inside your html file
<link rel="stylesheet" href="path/to/modernselect.css">
<script src="path/to/modernselect.js"></script>
or install with npm
npm install @nekodev/modernselect --save
Include the files :
From your javascript
import ModernSelect from '@nekodev/modernselect'
From your scss
@import '~@nekodev/modernselect/src/scss/modernselect.scss'
If using SCSS, you can customize some varaible :
$option-background: #FFFFFF !default;
$option-background-hover: lightgrey !default;
$output-radius: .2em !default;
$output-icon-size: 30px !default;
$dropdown-animation-duration: .3s !default;
$border: solid 1px rgba(0, 0, 0, .2) !default;
Initialisation
<div class="modern-select" id="modern-select">
<div data-value="" data-placeholder>Select value</div>
<div data-value="1">
<div class="select-content">
<img src="https://picsum.photos/id/0/200">
<span>Computer</span>
</div>
</div>
<div data-value="2">
<div class="select-content">
<img src="https://picsum.photos/id/10/200">
<span>Forest</span>
</div>
</div>
<div data-value="3">
<div class="select-content">
<img src="https://picsum.photos/id/237/200">
<span>Dog</span>
</div>
</div>
<div data-value="4">
<div class="select-content">
<img src="https://picsum.photos/id/1001/200">
<span>Sea</span>
</div>
</div>
</div>
let modernSelect = new ModernSelect("#modern-select", {
formName: "choice",
animation: "fade-in",
icon: `<i class="fas fa-arrow-down"></i>`,
customClass: "my-custom-class"
})
All element with data-value
propertie have same role than <option value="someValue"></option>
. So all data-value
elements are considère has option. You can also customise the option has you need.
Options
Option | Value type | Description |
---|---|---|
formName | String | The name of the select input. You can access to form request name with this property |
animation | String | The animation class that you want to apply when the dropdown is opened. You can create your once or use library like animate.css. |
icon | String | You can add some image or fontawesome element for example. ex. : icon: <i class="fas fa-arrow-down"></i> |
customClass | String | The custom class you want to add to the output element. With this class, you can change the design of this element. |
Methods
Method | return | Description |
---|---|---|
value | void | Set a new value to the custom-select element. |
close | void | Close the dropdown. |
on | void | Event listener for triggered event. |
Events
Your element send three events : change
, open
, close
You can listen event with :
modernSelect.on('change', function() {
doSometing()
})
The change event is trigger only if the value of the element is changing.
Warning : If you change the value with the value()
method and if the value is not defined in any data-value
element, you can get a warrning in the console. No effect on your script, no crash. For turn off this feature set debug to false like this :
modernSelect.debug = false