Material Design Lite selectfield component material-design-lite
Check out the example
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
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>Select field.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
<input class="mdl-textfield__input" id="country" name="country" value="Belarus" type="text" readonly tabIndex="-1" data-val="BLR"/>
<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="RUS">Russia</li>
</ul>
</div>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.
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.
Every li should have its own data-val attribute. Choosing any element of select you change input's data-val property, which you can get using document.querySelector(selector).getAttribute('data-val');, where selector is your input's id.
Initial Select takes the default width (300px). If you want that Select automatically adapt to the maximum width add class getmdl-select__fullwidth.
Select automatically adapt to the maximum height. If you want to use small height (300px) and see scroll bar, add class getmdl-select__fix-height.
See the LICENSE file for license rights and limitations (MIT).
- Star the repo
- Create issue report or feature request
- Tweet about it
- Follow us on Twitter