Framework7 Icons And Inputs

by Online Tutorials Library July 14, 2022
Framework7 Icons and Inputs

Icons can be used with inputs in Framework7.
Example

Let’s take an example to demonstrate the use of icons with inputs:
  <!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>Icons and Inputs</title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.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 = “left”> </div>                          <div class = “center”>Form Elements</div>                          <div class = “right”> </div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “content-block-title”>Icons and Inputs</div>                       <div class = “list-block”>                          <ul>                             <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-name”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “text” placeholder = “Enter your name”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-email”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “email” placeholder = “Enter your e-mail”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-password”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “password” placeholder = “Enter your password”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-tel”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “tel” placeholder = “Enter your phone number”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-gender”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <select>                                            <option>Male</option>                                            <option>Female</option>                                         </select>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-calendar”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “date” placeholder = “Birth day” value = “2014-04-30”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-calendar”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <input type = “datetime-local”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-media”><i class = “icon icon-form-toggle”></i></div>                                   <div class = “item-inner”>                                      <div class = “item-input”>                                         <label class = “label-switch”>                                            <input type = “checkbox”>                                            <div class = “checkbox”></div>                                         </label>                                      </div>                                   </div>                                </div>                             </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>           // here initialize the app           var myApp = new Framework7();             // If your using custom DOM library, then save it to $$ variable           var $$ = Dom7;             // Add the view           var mainView = myApp.addView(‘.view-main’, {                         // enable the dynamic navbar for this view              dynamicNavbar: true           });        </script>     </body>    </html>  
Test it Now
Next TopicFramework7 Insert
Framework7 Icons And Inputs

Framework7 Icons and Inputs

Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like
