Module Description
This module provides a Form API select element with icons using jQuery UI.
This module is for developers only. It does not provide any user functionality.
With Select icons you can easily create select element with icons of your choice using nothing but drupal Forms API and some CSS:
$form['fancy_select'] = [ '#type' => 'select_icons', '#title' => $this->t('Color'), '#options' => [ 'r' => $this->t('Red'), 'g' => $this->t('Green'), 'b' => $this->t('Blue'), ], // This is where magic happens: // CSS classes from 'data-class' attribute are used in JavaScript // when building jQuery UI selectmenu widget. '#options_attributes' => [ 'r' => new Attribute(['data-class' => ['color', 'red']]), 'g' => new Attribute(['data-class' => ['color', 'green']]), 'b' => new Attribute(['data-class' => ['color', 'blue']]), ], // Don't forget to add proper CSS that will provide icons. // It is recommended to use sprite sheets for better performance. '#attached' => [ 'library' => ['my/colors'] ], ]; Requirements
* jQuery UI Selectmenu Widget
Similar projects and how they are different
* Select2 Boxes - Select2 Boxes integrates with Select2 library and provides field widget plugins while Select Icons integrates with jQuery UI and is for developer.
Maintainers
* Florent Torregrosa (Grimreaper)
Previous maintainers
* SiliconMind
* vlad.dancer
This module is for developers only. It does not provide any user functionality.
With Select icons you can easily create select element with icons of your choice using nothing but drupal Forms API and some CSS:
$form['fancy_select'] = [ '#type' => 'select_icons', '#title' => $this->t('Color'), '#options' => [ 'r' => $this->t('Red'), 'g' => $this->t('Green'), 'b' => $this->t('Blue'), ], // This is where magic happens: // CSS classes from 'data-class' attribute are used in JavaScript // when building jQuery UI selectmenu widget. '#options_attributes' => [ 'r' => new Attribute(['data-class' => ['color', 'red']]), 'g' => new Attribute(['data-class' => ['color', 'green']]), 'b' => new Attribute(['data-class' => ['color', 'blue']]), ], // Don't forget to add proper CSS that will provide icons. // It is recommended to use sprite sheets for better performance. '#attached' => [ 'library' => ['my/colors'] ], ]; Requirements
* jQuery UI Selectmenu Widget
Similar projects and how they are different
* Select2 Boxes - Select2 Boxes integrates with Select2 library and provides field widget plugins while Select Icons integrates with jQuery UI and is for developer.
Maintainers
* Florent Torregrosa (Grimreaper)
Previous maintainers
* SiliconMind
* vlad.dancer
Module Link
Project Usage
61
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the problem of creating select elements with icons using jQuery UI in Drupal Forms API for developers.
Data Name
select_icons