Elegante sustitución de elementos selectos en JavaScript puro-vainilla-seleccione
| Autor: | vorotina |
|---|---|
| Views Total: | 2,941 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 8, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
vanilla-select is a pure vanilla JavaScript plugin used for rendering a dynamic, searchable dropdown list/menu to replace the native select box.
Instalación
# NPM $ npm install vanilla-select # Bower $ bower install vanilla-select
Funcionamiento
Agregue referencias a los archivos JavaScript y CSS de la selección de vainilla:
<link rel="stylesheet" href="src/vanilla-select.css"> <script src="src/vanilla-select.js"></script>
Defina los datos que se presentarán en la selección desplegable.
const source = [
{
icon: 'fa fa-font',
value: 'Abril Fatface'
},
{
icon: 'fa fa-font',
value: 'Allura'
},
{
icon: 'fa fa-font',
value: 'Amatic SC'
}
]; Cree una nueva instancia con algunas opciones y, a continuación, anexe la selección desplegable al contenedor de destino.
const select = new Select({
placeholder: 'Select Font',
dataset: source,
search: true,
noResults: 'No results found',
onSelected: item => callback(item)
}).componentMount({
el: document.querySelector('[ref="select"]')
}); Registro de cambios
1.0.13 (07/07/2018)
- actualizar
