foundation-select

Select plugin for Foundation sites 6

Installation

With bower:

bower install --save foundation-select

Add all nessesary files to your html. This plugin only works with foundation and requires foundation-perfect-scrollbar and font-awesome.

<link rel="stylesheet" type="text/css" href="bower_components/foundation-sites/dist/css/foundation.min.css"> 
<link rel="stylesheet" type="text/css" href="bower_components/foundation-perfect-scrollbar/dist/css/foundation-perfect-scrollbar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/foundation-select/dist/css/foundation-select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.min.js"></script>
<script src="bower_components/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>
<script src="bower_components/foundation-perfect-scrollbar/dist/js/foundation.perfectScrollbar.min.js"></script>
<script src="bower_components/foundation-select/dist/js/foundation.select.min.js"></script>

If you are using foundation's scss with gulp, the best way add the styles is by adding it to the sass paths in your gulpfile.

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
    'bower_components/normalize.scss/sass',
    'bower_components/foundation-sites/scss',
    'bower_components/foundation-perfect-scrollbar/src/scss/plugin',
    'bower_components/foundation-select/src/scss/plugin',
    'bower_components/motion-ui/src',
    'bower_components/font-awesome/scss'
];

gulp.task('sass', function() {
    ...

Then add these settings to your _settings.scss file for customization

$select-background: $input-background !default;
$select-border: $input-border !default;
$select-color: $input-color !default;
$select-dropdown-height: rem-calc(300);

Usage

Just add a data-select attribute to your select tag.

<select data-select>
    <option value="">Placeholder<option>
    <option value="0">Option 1<option>
    <option value="1">Option 2<option>
    ...
</select>

Run foundation and it will automaticaly initialize all the selects

$(document).foundation();

Plugin options

Name	Default	Descrition
data-icon-class	'fa-caret-down'	The FontAwesome class for the select triangle icon.
data-placeholder	''	Custom placeholder.
data-value	''	The default value of the select.
data-mousewheel	true	If set to true scrolling over the element will change the value if the element has focus.

Licence

© Samuel Moncarey