Material Design Lite (MDL) select field component using Text Fields and Menus.
- Install via Bower :
bower install mdl-selectfield-component - Install via NPM :
npm install mdl-selectfield-component
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL introduction.
<!-- material-design-lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- mdl-selectfield -->
<link rel="stylesheet" href="path_to/mdl-selectfield/mdl-selectfield.min.css">
<script defer src="path_to/mdl-selectfield/mdl-selectfield.min.js"></script>mdl-selectfield can be used with any color schemes.
It uses the indigo-pink color scheme but if you want to use another one, just modify the color-primary variable with the color scheme you want to use in the bower_components/material-design-lite/src/_variables.scss file or node_modules/material-design-lite/src/_variables.scssfile depending on the package manager you are using. Finally, regenerate the minified CSS files using gulp build:css.
The new minified CSS files are available in the dist/ folder.
- Add a text field.
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="my-super-selectfield">
<label class="mdl-textfield__label" for="my-super-selectfield">Text...</label>
</div>- Add
mdl-selectfieldandmdl-js-selectfieldclasses, separated by spaces, to the div container.
<div class="mdl-textfield mdl-js-textfield mdl-selectfield mdl-js-selectfield">
<input class="mdl-textfield__input" type="text" id="my-super-selectfield">
<label class="mdl-textfield__label" for="my-super-selectfield">Text...</label>
</div>- Inside the div, after the
<label>, add a menu.
<div class="mdl-textfield mdl-js-textfield mdl-selectfield mdl-js-selectfield">
<input class="mdl-textfield__input" type="text" id="my-super-selectfield">
<label class="mdl-textfield__label" for="my-super-selectfield">Text...</label>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="my-super-selectfield">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>The select field component is ready for use.
You can see a live example on CodePen.
<div class="mdl-textfield mdl-js-textfield mdl-selectfield mdl-js-selectfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="sample1">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-selectfield mdl-js-selectfield">
<input class="mdl-textfield__input" type="text" id="sample2">
<label class="mdl-textfield__label" for="sample2">Text...</label>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="sample2">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>