Framework7 - Radios Group Material

Description

The Radios group is also supported by the Material theme and you have to add additional icons for radios.

Example

The following example demonstrates the use of radios group material in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Radios group Material</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Radios Group</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Radios group</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "ks-radio" value = "Pants" checked>
                                 <div class = "item-media"><i class = "icon icon-form-radio"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Pants</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "ks-radio" value = "Shirts">
                                 <div class = "item-media"><i class = "icon icon-form-radio"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Shirts</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "ks-radio" value = "Jeans">
                                 <div class = "item-media"><i class = "icon icon-form-radio"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Jeans</div>
                                 </div>
                              </label>
                           </li>
                           
                           <li>
                              <label class = "label-radio item-content">
                                 <input type = "radio" name = "ks-radio" value = "Sarees">
                                 <div class = "item-media"><i class = "icon icon-form-radio"></i></div>
                                 <div class = "item-inner">
                                    <div class = "item-title">Sarees</div>
                                 </div>
                              </label>
                           </li>
                        </ul>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as forms_radio_material.html file in your server root folder.

  • Open this HTML file as http://localhost/forms_radio_material.html and the output is displayed as shown below.

  • The form layout shows the radio group with the list of options, which allows you to check only one option from the list.

framework7_forms.htm
Advertisements