Narcissistic Piano Mover

    encapsulated-mdl-selectfield

    1.0.5 • Public • Published

    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.

    Bower Version NPM Version license

    bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

    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.

    <div>
    ...
    </div>

     2. Inside the div, code an <select> element, add the options and add an id attribute of your choice.

    <div>
      <select id="gender">
        <option value=""></option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>

     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.

    <div>
      <select id="gender">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <label for="gender">User gender</label>
    </div>

     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.

    <div class="mdl-selectfield mdl-js-selectfield">
      <select id="gender" class="mdl-selectfield__select">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <label class="mdl-selectfield__label" for="gender">User gender</label>
      <span class="mdl-selectfield__error">Select a value</span>
    </div>

    The select field component is ready for use.

    Examples

    Select field with a standard label.

    <div class="mdl-selectfield mdl-js-selectfield">
      <select id="gender" class="mdl-selectfield__select">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <label class="mdl-selectfield__label" for="gender">User gender</label>
      <span class="mdl-selectfield__error">Select a value</span>
    </div>

    Select field with a floating label.

    <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
      <select id="gender" class="mdl-selectfield__select">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <label class="mdl-selectfield__label" for="gender">User gender</label>
      <span class="mdl-selectfield__error">Select a value</span>
    </div>

    Select field with a standard label, and error message.

    <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
      <select id="gender" class="mdl-selectfield__select">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <label class="mdl-selectfield__label" for="gender">User gender</label>
      <span class="mdl-textfield__error">Select a value</span>
    </div>

    Select field with a floating label and icon.

    <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
      <select id="gender" class="mdl-selectfield__select">
        <option value=""></option>
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
      </select>
      <div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
      <label class="mdl-selectfield__label" for="gender">User gender</label>
    </div>

    Install

    npm i encapsulated-mdl-selectfield

    DownloadsWeekly Downloads

    4

    Version

    1.0.5

    License

    MIT

    Last publish

    Collaborators

    • genadis