rawselect
v1.0.4
Published
An accessible jQuery custom select
Downloads
56
Readme
rawselect
An accessible jQuery custom select, styled with sass for easy customization https://github.com/rawnet/rawselect
Installation
NPM / Yarn
npm install rawselect --save
yarn add rawselect
Usage
HTML
<select class="rawselect">
<option value="">Please select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Imports
@import '../../node_modules/rawselect/dist/rawselect.sass'
import rawselect from 'rawselect'
JS
$('.rawselect').rawselect();
Search
You can enable search by passing the option when you initialize the plugin.
$('.rawselect').rawselect({
search: true
});
Alternativley you can enable/disable search on inidividual instances using a data attribute:
<select class="rawselect" data-rawselect-search="true">
<option value="">Please select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Themes
There are three default themes, light, dark and block. The light theme is applied by default, to apply the dark theme simply add the rawselect--dark
class to your select, and to apply the block theme simply add rawselect--block
.
<select class="rawselect rawselect--dark">
<option value="">Please select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="rawselect rawselect--block">
<option value="">Please select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
Icons
You can add an icon to your options by simply adding a data-icon
attribute to the option.
<select class="rawselect rawselect--dark">
<option value="">Please select something</option>
<option value="1" data-icon="http://placehold.it/30x20">Option 1</option>
<option value="2" data-icon="http://placehold.it/30x20">Option 2</option>
</select>
Classes
Any classes you add to your select or option will get copied across to rawselect, this is useful for custom themes or for adding icons to options.
<select class="rawselect my-class">
<option value="">Please select something</option>
<option value="1" class="my-class">Option 1</option>
<option value="2" class="my-class">Option 2</option>
</select>
Customization
rawselect has been written to be easily customized using Sass variables. To overwrite the defaults simply define your variables before the inclusion of rawselect.sass
.
Available variables
$rawselect-border-radius: 4px !default
$rawselect-border-width: 1px !default
$rawselect-color-background-dark: #363636 !default
$rawselect-color-background-light: #ffffff !default
$rawselect-color-brand: #f70c36 !default
$rawselect-color-font-dark: #666666 !default
$rawselect-color-font-light: #999999 !default
$rawselect-font-family: sans-serif !default
$rawselect-font-size: 13px !default
$rawselect-line-height: 1.2 !default
$rawselect-text-align: left !default
$rawselect-max-width: 400px !default
$rawselect-min-width: 200px !default
$rawselect-height: 50px !default
$rawselect-options-max-height: 200px !default
$rawselect-padding: 17px 50px 18px 18px !default
$rawselect-option-padding: 13px 18px 14px !default
$rawselect-optgroup-padding: 13px 18px 14px 28px !default
$rawselect-arrow-border-width: 2px !default
$rawselect-arrow-border-radius: 0px !default
$rawselect-arrow-size: 10px !default
$rawselect-block-width: 50px !default
$rawselect-max-icon-size: 50px !default
$rawselect-icon-margin: 0 10px 0px 0 !default
Events
rawselect triggers a change
event on the select
;
Methods
rawselect provides an rawselect.update
method which when triggered on the select
will re-populate the options. It also provides a rawselect.change
method which when triggered on the select
will update the sellectron trigger to match the value of the select
License
Copyright (c) 2018 Rawnet
Licensed under the MIT license.