| <p>Demonstrates how you can create your own theme of MDL text fields without affecting the original MDL fields.</p> |
| |
| <style> |
| .borderedfield-demo-container { |
| } |
| |
| .borderedfield-demo-container .mdl-cell { |
| padding: 0 4px 8px 0; |
| } |
| |
| .borderedfield-demo-container .mdl-cell p { |
| margin-bottom: 0; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| /* File input example */ |
| .mdl-button--file input { |
| cursor: pointer; |
| opacity: 0; |
| width: 1px; |
| height: 1px; |
| } |
| </style> |
| |
| |
| <div class = "borderedfield-demo-container mdlext-bordered-fields"> |
| |
| <div class="mdl-grid mdl-grid--no-spacing"> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text</p> |
| <div class="mdl-textfield mdl-js-textfield"> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text numeric</p> |
| <div class="mdl-textfield mdl-js-textfield"> |
| <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"> |
| <label class="mdl-textfield__label">Number...</label> |
| <span class="mdl-textfield__error">Input is not a number!</span> |
| </div> |
| </div> |
| |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with floating label, required field</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required> |
| <label class="mdl-textfield__label">Programming language</label> |
| </div> |
| </div> |
| <datalist id="languages"> |
| <option value="HTML"> |
| <option value="CSS"> |
| <option value="JavaScript"> |
| <option value="Java"> |
| <option value="Ruby"> |
| <option value="PHP"> |
| <option value="Go"> |
| <option value="Erlang"> |
| <option value="Python"> |
| <option value="C"> |
| <option value="C#"> |
| <option value="C++"> |
| </datalist> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Select element with floating label</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Numeric with floating label</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"> |
| <label class="mdl-textfield__label">Number...</label> |
| <span class="mdl-textfield__error">Input is not a number!</span> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Disabled floating label</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123"> |
| <label class="mdl-textfield__label" >Number...</label> |
| <span class="mdl-textfield__error">Input is not a number!</span> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with icons left and right, disabled</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <i class="material-icons">radio</i> |
| <input class="mdl-textfield__input" type="text" disabled> |
| <label class="mdl-textfield__label">Text...</label> |
| <i class="material-icons">fingerprint</i> |
| </div> |
| </div> |
| |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with button left</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left"> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">phone</i> |
| </label> |
| |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with button right</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right"> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">settings_voice</i> |
| </label> |
| </div> |
| </div> |
| |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Select element</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Select element with floating label</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Disabled Select element</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select" disabled> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Select element with icon left</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-bordered-fields__icon-left"> |
| <i class="material-icons">radio</i> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Select element with button left</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left"> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">phone</i> |
| </label> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Disabled Select element</p> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left"> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">phone</i> |
| </label> |
| <select class="mdlext-selectfield__select" disabled> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| </div> |
| |
| |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with icon left</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left"> |
| <i class="material-icons">radio</i> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with icon right</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right"> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| <i class="material-icons">fingerprint</i> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with icons left and right</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <i class="material-icons">radio</i> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| <i class="material-icons">fingerprint</i> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with buttons left and right</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">phone</i> |
| </label> |
| |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">settings_voice</i> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with buttons left and right, disabled</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">phone</i> |
| </label> |
| |
| <input class="mdl-textfield__input" type="text" disabled> |
| <label class="mdl-textfield__label">Text...</label> |
| |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">settings_voice</i> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>Text with icon and button</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <i class="material-icons">radio</i> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">settings_voice</i> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mdl-cell mdl-cell--4-col"> |
| <p>File upload</p> |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right "> |
| <input class="mdl-textfield__input" type="text" id="uploadfile2" readonly> |
| <label class="mdl-textfield__label">File (work in progress)</label> |
| |
| <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile2"> |
| <i class="material-icons">attach_file</i> |
| <input type="file" id="uploadBtn2"> |
| </label> |
| </div> |
| <!-- |
| // Need a script to work properly - something like this |
| --> |
| <script> |
| (function() { |
| 'use strict'; |
| document.querySelector('#uploadBtn2').addEventListener('change', function() { |
| var n = document.querySelector("#uploadfile2"); |
| n.value = this.files[0].name; |
| n.parentNode.classList.add('is-dirty'); |
| }); |
| }()); |
| </script> |
| </div> |
| |
| </div> |
| |
| <fieldset disabled> |
| <legend>Disabled fieldset</legend> |
| <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label"> |
| <select class="mdlext-selectfield__select"> |
| <option value=""></option> |
| <option value="option1">option 1</option> |
| <option value="option2">option 2</option> |
| <option value="option3">option 3</option> |
| <option value="option4">option 4</option> |
| <option value="option5">option 5</option> |
| <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option> |
| </select> |
| <label class="mdlext-selectfield__label">Profession</label> |
| </div> |
| |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
| <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"> |
| <label class="mdl-textfield__label">Number...</label> |
| <span class="mdl-textfield__error">Input is not a number!</span> |
| </div> |
| |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right"> |
| <i class="material-icons">radio</i> |
| <input class="mdl-textfield__input" type="text"> |
| <label class="mdl-textfield__label">Text...</label> |
| <label class="mdl-button mdl-js-button mdl-button--icon"> |
| <i class="material-icons">settings_voice</i> |
| </label> |
| </div> |
| </fieldset> |
| |
| </div> |
| |
| <h5>Credits</h5> |
| <p>The Bordered Fields Theme component is based on this <a href="http://codepen.io/prajwal078/pen/LVJZXz" target="_blank">CodePen</a></p> |