JarCastinggetmdl-select
Material Design Lite selectfield component for material-design-lite
Live example
Check out the DEMO
Install
There are three ways to install getmdl-select:
-
Using npm: Use this command in your command line:
npm install getmdl-select
-
Using Bower: Use this command in your command line:
bower install getmdl-select
-
Clone the repo using Git:
git clone https://github.com/CreativeIT/getmdl-select.git
Alternatively you can download this repository and then:
cd getmdl-select npm install
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.
<!-- getmdl -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="your_path_to/material-design-lite/material.min.css">
<script defer src="your_path_to/material-design-lite/material.min.js"></script>
<!--getmdl-select-->
<link rel="stylesheet" href="path_to/getmdl-select/getmdl-select.min.css">
<script defer src="path_to/getmdl-select/getmdl-select.min.js"></script>
Example
Simple select field. To see other examples visit this page.
<div class="mdl-textfield mdl-js-textfield getmdl-select">
<input class="mdl-textfield__input" value="" id="country" readonly/>
<input value="" type="hidden" name="country"/>
<label class="mdl-textfield__label" for="country">Country</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country">
<li class="mdl-menu__item" data-val="BLR">Belarus</li>
<li class="mdl-menu__item" data-val="BRA">Brazil</li>
<li class="mdl-menu__item" data-val="FRA">France</li>
<li class="mdl-menu__item" data-val="DEU">Germany</li>
<li class="mdl-menu__item" data-val="RUS">Russia</li>
</ul>
</div>
Important
If you want to use more than one getmdl-select item use different ids for inputs and don't forget to change ul and label's for attributes. It works wrong without this.
Configuration options
Dynamically usage
For dynamically usage, you must add getmdlSelect.init(cssSelector) in javascript code, (where cssSelector, for example, is ".getmdl-select" or "#mySelect"), after new item is created or any new element added to existing list.
data-val
Every li should have its own data-val attribute. Choosing any element of select you change value of hidden input as data-val property of corresponding li. Also you change value of readonly input to li.textContent. Then after form submit, next pair hiddenInputName=hiddenInputValue will send to server side.
Pre-selected item
To set pre-selected value add data-selected="true" attribute to corresponding li in your list.
Width
Initial Select takes the default width (300px). You can change it by overriding the CSS property width.
Height
Options list automatically adapt to the maximum height by content. If you want to use small height (300px) and see scroll bar, add class getmdl-select__fix-height.
LICENSE
See the LICENSE file(MIT).
Hire us
We are ready to bring value to your business. Visit our site creativeit.io or drop us a line [email protected]. We will be happy to help you!
Support the project
- Star the repo
- Create issue report or feature request
- Tweet about it
- Follow us on Twitter
