The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of radio
buttons. The below table mentions the available classes and their
effects.
mdl_radio.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-radio Identifies label as an MDL component and is required on label element. |
| 2 | mdl-js-radio Sets basic MDL behavior to label and is required on label element. |
| 3 | mdl-radio__button Sets basic MDL behavior to radio and is required on input element (radio button). |
| 4 | mdl-radio__label Sets basic MDL behavior to caption and is required on span element (caption). |
| 5 | mdl-js-ripple-effect Sets ripple click effectt and is optional goes on label element, not input element (radio button). |
Example
The following example showcases the use of mdl-slider classes to show different types of radio buttons.mdl_radio.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>Default Radio Button</td><td>Radio Button with Ripple Effect</td><td>Disabled Radio Button</td></tr> <tr><td> <label class="mdl-radio mdl-js-radio" for="option1"> <input type="radio" id="option1" name="gender" class="mdl-radio__button" checked> <span class="mdl-radio__label">Male</span> </label> </td> <td> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option2"> <input type="radio" id="option2" name="gender" class="mdl-radio__button" > <span class="mdl-radio__label">Female</span> </label> </td> <td> <label class="mdl-radio mdl-js-radio" for="option3"> <input type="radio" id="option3" name="gender" class="mdl-radio__button" disabled> <span class="mdl-radio__label">Don't know (Disabled)</span> </label> </td> </tr> </table> </body> </html>
No comments:
Post a Comment