https://github.com/creativeit/getmdl-select

Select for material-design-lite
https://github.com/creativeit/getmdl-select

Last synced: about 1 year ago
JSON representation

Select for material-design-lite

• Host: GitHub
• URL: https://github.com/creativeit/getmdl-select
• Owner: CreativeIT
• License: mit
• Created: 2015-11-27T11:18:13.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-10-29T13:59:59.000Z (over 6 years ago)
• Last Synced: 2025-03-28T14:07:40.874Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://creativeit.github.io/getmdl-select/
• Size: 3.62 MB
• Stars: 300
• Watchers: 14
• Forks: 84
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
    

# getmdl-select

Material Design Lite selectfield component for [material-design-lite](https://github.com/google/material-design-lite)

## Live example

![alt tag](https://raw.github.com/CreativeIT/getmdl-select/gh-pages/lib/index_mdl/select_mdl.gif)

Check out the [DEMO](http://creativeit.github.io/getmdl-select/)

## Install

There are three ways to install getmdl-select:

 1. Using [npm](http://npmjs.org/):

    Use this command in your command line: 

    ```bash

    npm install getmdl-select

    ```

 2. Using [Bower](http://bower.io/):

    Use this command in your command line: 

    ```bash

    bower install getmdl-select

    ```

 3. Clone the repo using Git:

    ```bash

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

    ```

    

    Alternatively you can [download](https://github.com/CreativeIT/getmdl-select/archive/master.zip)

this repository and then:

    

    ```bash

    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 `` section of the page, as described in the MDL Introduction.

   ```html

   

   

   

      

      

   

   

   ```

### Example

Simple select field. To see other examples visit [this page](http://creativeit.github.io/getmdl-select/).

 ```html

    


       

       

       Country

       


         
Belarus

         
Brazil

         
France

         
Germany

         
Russia

       

    

 ```

### 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](https://github.com/CreativeIT/getmdl-select/blob/master/LICENSE.txt)(MIT).

## Hire us

We are ready to bring value to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line . We will be happy to help you!

## Support the project

* Star the repo

* Create issue report or feature request

* [Tweet about it](https://twitter.com/CreativeITeam)

* Follow us on [Twitter](https://twitter.com/CreativeITeam)