Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gibbok/dijit-select-optgroup
SelectOptgroup is a styleable, searchable drop down select box for Dojo which includes grouping of options (similar to html <select> element with <optgroup>).
https://github.com/gibbok/dijit-select-optgroup
dijit dojo dojo-widgets javascript
Last synced: 19 days ago
JSON representation
SelectOptgroup is a styleable, searchable drop down select box for Dojo which includes grouping of options (similar to html <select> element with <optgroup>).
- Host: GitHub
- URL: https://github.com/gibbok/dijit-select-optgroup
- Owner: gibbok
- License: mit
- Created: 2017-06-10T06:14:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-03T14:57:35.000Z (over 2 years ago)
- Last Synced: 2024-10-28T14:23:10.736Z (2 months ago)
- Topics: dijit, dojo, dojo-widgets, javascript
- Language: JavaScript
- Homepage: https://gibbok.github.io/dijit-select-optgroup/
- Size: 55.7 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SelectOptgroup
SelectOptgroup is a styleable, searchable drop down select box for [Dojo Toolkit](https://dojotoolkit.org/) which includes grouping of options (similar to html `` element with ``).
SelectOptgroup extends [dijit.form.Select](http://dojotoolkit.org/reference-guide/1.10/dijit/form/Select.html) maintaining its API and core functionalities.
[Try live example](https://gibbok.github.io/dijit-select-optgroup).
---
### 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 run `npm install`.
- For Bower users, add this dependecy in your bower.json: `"dependencies": { "dijit-select-optgroup": "^1.0.0" }` and run `bower 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](http://dojotoolkit.org/api/?qs=1.10/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
```javascript
var instance = new SelectOptgroup({
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: '
Icon Text', // 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
```css
.SelectOptgroup__flattened .dijitMenuItemLabel {
/* style menu item as optgroup */
padding-left: 0 !important;
}
.SelectOptgroup__nested .dijitMenuItemLabel {
/* style menu item as option */
padding-left: 25px !important;
}
```
[Working example available at this page.](example.html)