Monday, March 6, 2017

Material Design Lite - Textfields

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of text inputs. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-textfield
Identifies container as an MDL component and is required on "outer" div element.
2mdl-js-textfield
Sets basic MDL behavior to input and is required on "outer" div element.
3mdl-textfield__input
Identifies element as textfield input and is required on input or textarea element.
4mdl-textfield__label
Identifies element as textfield label and is required on label element for input or textarea elements.
5mdl-textfield--floating-label
Applies floating label effect and is optional; goes on "outer" div element.
6mdl-textfield__error
Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7mdl-textfield--expandable
Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on "outer" div element.
8mdl-button
Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" div's label element.
9mdl-js-button
Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" div's label element.
10mdl-button--icon
Identifies label as an MDL icon container; used for expandable input fields, and is required on "outer" div's label element.
11mdl-input__expandable-holder
Identifies a container as an MDL component; used for expandable input fields, and is required on "inner" div element.
12is-invalid
Identifies the textfield as invalid on initial load and is optional on mdl-textfield element.

Example

The following example showcases the use of mdl-textfield classes to show different types of textfields.
mdl_textfields.htm
<html>
<head>
   <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
   <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">   
   <script langauage="javascript">
      function showMessage(value){
         document.getElementById("message").innerHTML = value;
      }   
   </script>
</head>
<body>
   <table>
      <tr><td>Simple Text Field</td><td>Numeric Text Field</td><td>Disabled Text Field</td></tr>
      <tr><td> 
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield">
               <input class="mdl-textfield__input" type="text" id="text1">
               <label class="mdl-textfield__label" for="text1">Text...</label>
            </div>
          </form>
   </td>
      <td>
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield">
               <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text2">
               <label class="mdl-textfield__label" for="text2">Number...</label>
      <span class="mdl-textfield__error">Number required!</span>
            </div>
          </form>
   </td>
      <td>
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield">
               <input class="mdl-textfield__input" type="text" id="text3" disabled>
               <label class="mdl-textfield__label" for="text3">Disabled...</label>
            </div>
          </form>
    </td>
      </tr>
   <tr><td>Simple Text Field with Floating Label</td><td>Numeric Text Field with Floating Label</td><td> </td></tr>
      <tr><td> 
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input" type="text" id="text4">
               <label class="mdl-textfield__label" for="text4">Text...</label>
            </div>
          </form>
   </td>
      <td>
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text5">
               <label class="mdl-textfield__label" for="text5">Number...</label>
      <span class="mdl-textfield__error">Number required!</span>
            </div>
          </form>
   </td>
      <td> </td>
      </tr>
      <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td><td> </td></tr>
      <tr><td> 
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield">
               <textarea class="mdl-textfield__input" type="text" rows= "3" id="text7" ></textarea>
               <label class="mdl-textfield__label" for="text7">Lines...</label>
            </div>
          </form>
   </td>
      <td>
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
               <label class="mdl-button mdl-js-button mdl-button--icon" for="text8">
                  <i class="material-icons">search</i>
               </label>
               <div class="mdl-textfield__expandable-holder">
                  <input class="mdl-textfield__input" type="text" id="text8">
                     <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
               </div>
            </div>
          </form>
   </td>
      <td> </td>
      </tr>
   </table>   
</body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)