Material Design Lite - Tabs
home
Run
screen_rotation
fullscreen
cloud_download
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> </head> <body> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> <div class="mdl-tabs__tab-bar"> <a href="#example-tab1-panel" class="mdl-tabs__tab is-active">Example Tab 1</a> <a href="#example-tab2-panel" class="mdl-tabs__tab">Example Tab 2</a> <a href="#example-tab3-panel" class="mdl-tabs__tab">Example Tab 3</a> <a href="#example-tab4-panel" class="mdl-tabs__tab">Example Tab 4</a> </div> <div class="mdl-tabs__panel is-active" id="example-tab1-panel"> <p>This is Example Tab 1</p> </div> <div class="mdl-tabs__panel" id="example-tab2-panel"> <p>This is Example Tab 2</p> </div> <div class="mdl-tabs__panel" id="example-tab3-panel"> <p>This is Example Tab 3</p> </div> <div class="mdl-tabs__panel" id="example-tab4-panel"> <p>This is Example Tab 4</p> </div> </div> </body> </html>
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> </head> <body> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> <div class="mdl-tabs__tab-bar"> <a href="#example-tab1-panel" class="mdl-tabs__tab is-active">Example Tab 1</a> <a href="#example-tab2-panel" class="mdl-tabs__tab">Example Tab 2</a> <a href="#example-tab3-panel" class="mdl-tabs__tab">Example Tab 3</a> <a href="#example-tab4-panel" class="mdl-tabs__tab">Example Tab 4</a> </div> <div class="mdl-tabs__panel is-active" id="example-tab1-panel"> <p>This is Example Tab 1</p> </div> <div class="mdl-tabs__panel" id="example-tab2-panel"> <p>This is Example Tab 2</p> </div> <div class="mdl-tabs__panel" id="example-tab3-panel"> <p>This is Example Tab 3</p> </div> <div class="mdl-tabs__panel" id="example-tab4-panel"> <p>This is Example Tab 4</p> </div> </div> </body> </html>
Copyrights@tutorialsplane.com