mdl-selectfield
Material Design Lite selectfield component (https://github.com/google/material-design-lite)
This is a fork of mebibou/mdl-selectfield patched to work with encapsulated-mdl.
Install
npm install encapsulated-mdl-selectfield --save
Build
A new build:encap
gulp task is introduced for building to build encapsulated production files
The task accepts:
- -v [VENDOR_NAME] parameter, default "Google"
- -p [PREFIX] parameter, default is mdl
- -d [DEPENDENCY] parameter, to be injected into the module, default is "encapsulated-mdl".
- MDL is encapsulated inside window[vendor].mdl or exposed as cjs/amd module
- If cjs/amd is not available, the global window[VENDOR_NAME].mdl.componentHandler is expected.
Below is the original README. Usage remains the same.
A custom implementation of a selectfield component for Material Design Lite
Live Example
Check out the CodePen
Install
Via bower:
bower install mdl-selectfield
Or via npm:
npm install mdl-selectfield
Then include in your html:
<link rel="stylesheet" href="./bower_components/mdl-selectfield/dist/mdl-selectfield.min.css">
...
<script src="./bower_components/mdl-selectfield/dist/mdl-selectfield.min.js"></script>
Basic use
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.
To include a MDL select field component:
1. Code a <div>
element to hold the text field.
...
2. Inside the div, code an <select>
element, add the options and add an id
attribute of your choice.
Male Female
3. Also inside the div, after the select field, code a <label>
element with a for
attribute whose value matches the select
element's id
value, and a short string to be used as the field's placeholder text.
option 1 option 2 User gender
4. Add one or more MDL classes, separated by spaces, to the div container, select field, select label, and error message using the class
attribute.
option 1 option 2 User gender Select a value
The select field component is ready for use.
Examples
Select field with a standard label.
option 1 option 2 User gender Select a value
Select field with a floating label.
option 1 option 2 User gender Select a value
Select field with a standard label, and error message.
option 1 option 2 User gender Select a value
Select field with a floating label and icon.
option 1 option 2 arrow_drop_down User gender