Need private packages and team management tools?Check out npm Teams »

eidtor

0.0.1 • Public • Published

Select

ES6 Select extension for Base framework

example

How to use

Install

using npm/yarn

npm install @baianat/select
 
yarn add @baianat/select

Include necessary files

<head>
  <!-- you should include one of the following stylesheets-->
 
  <!-- if you use the standalone picker -->
  <link rel="stylesheet" href="dist/css/pciker.css">
 
  <!-- if you use Base.framework -->
  <link rel="stylesheet" href="dist/css/base.css">
</head>
<body>
    ...
    <!-- include javaScript file -->
    <script type="text/javascript" src="dist/js/pciker.js"></script> 
</body>

Create select element

There are two ways to get your Select data source, from HTML select markup or pass them as an array of values to data object.

From HTML select markup

<select name="" id="select-1" >
 
  <optgroup label="group-1">
    <option value="value-1">option-1</option>
    <option value="value-2">option-2</option>
  </optgroup>
 
  <optgroup label="group-2">
    <option value="value-3">option-3</option>
    <option value="value-4">option-4</option>
  </optgroup>
 
</select>
 
<script>
  const newSelect1 = new Select('#select-1');
</script> 

Passing values to data object

<select name="" id="select-2">
 
<script>
   const newSelect2 = new Select('#select-2', {
      data: [{
        text: 'Italy',
        value: 'IT'
      }, {
        text: 'USA',
        value: 'USA'
      }, {
        text: 'France',
        value: 'fr'
      }, {
        text: 'Egypt',
        value: 'EG'
      }]
    });
</script> 

To enable multiple mode you can add multiple to select element

<select name="" id="select" multiple>

or set multiple to true

const newSelect = new Select('#select', {
  multiple: true
});

Settings

Properties Default Description
data null generate the options values
multiple false enable/disable multiple mode

Methods

You can call method on Select instance.

const newSelect = new Select('#select');
 
newSelect.showMenu();
Method Argument Description
menuShow show select options menu
menuHide hide select options menu
menuToggle toggle options menu visibility
selectOption [Object] option select option
updateLabels (in multiple mode only) update the labels

License

MIT

Copyright (c) 2017 Baianat

Keywords

none

Install

npm i eidtor

DownloadsWeekly Downloads

1

Version

0.0.1

License

MIT

Last publish

Collaborators

  • avatar