SelectOptgroup
SelectOptgroup is a styleable, searchable drop down select box for Dojo Toolkit which includes grouping of options (similar to html <select>
element with <optgroup>
).
SelectOptgroup extends dijit.form.Select maintaining its API and core functionalities.
Great! So how do I use it?
- For npm users, add this dependecy in your package.json:
"dependencies": { "dijit-select-optgroup": "^1.0.0" }
and runnpm install
. - For Bower users, add this dependecy in your bower.json:
"dependencies": { "dijit-select-optgroup": "^1.0.0" }
and runbower install
.
How do I run the example?
- First install all dependencies using:
npm install
. - Now run your local server:
gulp connect
. - Open the example:
gulp example
.
API
SelectOptgroup uses the same API for dijit.form.Select, the only difference is the optgroup
property, which can be optionally passed in the objects for property options
to differentiate the item in the list.
Example
var instance = options: label: 'Optgroup item' value: '' optgroup: true // mark menu item as optgroup label: 'Option item' value: 'option '// mark menu item as option label: '' // empty strings mark menu item as separator value: '' label: '<div class="SelectOptgroup__nested"><span class="select__icon">Icon Text</span></div>' // html allowed in menu item value: 'grunt' 'domId';
Customization
You can customize the default layout for the entire component using CSS.
SelectOptgroup add by default two CSS classes SelectOptgroup__flattened
and SelectOptgroup__nested
.
Example