getmdl-select

Material Design Lite selectfield component material-design-lite

Live Example

Check out the example

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="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>   
<!--getmdl-select-->   
<link rel="stylesheet" href="https://cdn.rawgit.com/CreativeIT/getmdl-select/master/getmdl-select.min.css">
<script defer src="https://cdn.rawgit.com/CreativeIT/getmdl-select/master/getmdl-select.min.js"></script>

Example

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>

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.

Width

Initial Select takes the default width (300px). If you want that Select automatically adapt to the maximum width add class getmdl-select__fullwidth.

Height

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.

Install

Bower: bower install getmdl-select
npm: npm install getmdl-select

Download / Clone

Clone the repo using Git:

git clone https://github.com/CreativeIT/getmdl-select.git

Alternatively you can download this repository.

Build

To get started modifying the components or the docs, first install the necessary dependencies, from the root of the project:

npm install

LICENSE

See the LICENSE file for license rights and limitations (MIT).

faresd/getmdl-select