Framework7 Swipeable Tabs

by Online Tutorials Library July 14, 2022

Framework7 Swipeable Tabs

Swipeable tabs are required component. These tabs can be switched with simple transition by using additional tabs-swipeable-wrap wrapper class for the tabs.

Example

Let’s take an example to demonstrate the swiping of tabs with simple transition 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>Swipeable Tabs </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 navbar-fixed”>                 <div data-page = “home” class = “page with-subnavbar”>                                        <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “center”>Swipeable Tabs</div>                          <div class = “subnavbar”>                             <div class = “buttons-row”>                                <a href=”#tab1″ class = “button active tab-link”>Tab 1</a>                                <a href=”#tab2″ class = “button tab-link”>Tab 2</a>                                <a href=”#tab3″ class = “button tab-link”>Tab 3</a>                             </div>                          </div>                       </div>                    </div>                                        <div class = “tabs-swipeable-wrap”>                       <div class = “tabs”>                          <div id = “tab1” class = “page-content with-subnavbar tab active”>                             <div class = “content-block”>                                <p>This is tab 1 content</p>                                <p>tutoraspire offers Industrial and Summer Training on Java, PHP, .Net, Hadoop,     Data Analytics, R Programming, SAP, Android, Python, Oracle, Seleninum, Linux, C++ and     many more technologies in Delhi/NCR, India.</p>                             </div>                          </div>                                                    <div id = “tab2” class = “page-content tab”>                             <div class = “content-block”>                                <p>This is tab 2 content</p>                                <p>C programming language was developed in 1972 by Dennis Ritchie at bell     laboratories of AT&T (American Telephone & Telegraph), located in U.S.A.</p>                             </div>                          </div>                                                    <div id = “tab3” class = “page-content tab”>                             <div class = “content-block”>                                <p>This is tab 3 content</p>                                <p>Android is a software package and linux based     operating system for mobile devices such as tablet computers and smartphones.     It is developed by Google and later the OHA (Open Handset Alliance).     Java language is mainly used to write     the android code even though other languages can be used.</p>                             </div>                          </div>                                                 </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 TopicShow Tab Using JS

Framework7 Swipeable Tabs

Framework7 Swipeable Tabs

Example

AdMob with Firebase

Godot Tutorial

You may also like