Framework7 Insert

by Online Tutorials Library July 14, 2022

Framework7 Inset

The inset class is used to make the form element inset.

Example

Let’s take an example to demonstrate the usage of inset 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>Inset</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”>Inset</div>                       <div class = “list-block inset”>                          <ul>                             <li>                                <div class = “item-content”>                                   <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-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-inner”>                                      <div class = “item-input”>                                         <input type = “password” placeholder = “Enter your password”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <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-inner”>                                      <div class = “item-input”>                                         <input type = “datetime-local”>                                      </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 Just Inputs

Framework7 Insert

Framework7 Inset

Example

AdMob with Firebase

Godot Tutorial

You may also like