|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en" dir="ltr" mode="ionic"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <title>Tab Bar - Hide on Scroll</title> |
| 6 | + <meta |
| 7 | + name="viewport" |
| 8 | + content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" |
| 9 | + /> |
| 10 | + <script src="../../../../../scripts/testing/scripts.js"></script> |
| 11 | + <script nomodule src="../../../../../dist/ionic/ionic.js"></script> |
| 12 | + <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> |
| 13 | + <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" /> |
| 14 | + <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" /> |
| 15 | + </head> |
| 16 | + |
| 17 | + <body> |
| 18 | + <ion-app> |
| 19 | + <ion-tabs> |
| 20 | + <div class="ion-page"> |
| 21 | + <ion-content> |
| 22 | + <div class="spacer"> |
| 23 | + <p>Scroll down to hide the tab bar, scroll up to show it.</p> |
| 24 | + <p><strong>Requirements:</strong></p> |
| 25 | + <ul> |
| 26 | + <li>Theme must be set to <code>ionic</code></li> |
| 27 | + <li><code>expand</code> must be set to <code>compact</code></li> |
| 28 | + <li>A sibling <code>ion-content</code> must exist for scroll detection</li> |
| 29 | + </ul> |
| 30 | + </div> |
| 31 | + </ion-content> |
| 32 | + |
| 33 | + <ion-footer> |
| 34 | + <ion-tab-bar slot="bottom" hide-on-scroll="true" selected-tab="1" expand="compact"> |
| 35 | + <ion-tab-button tab="1"> |
| 36 | + <ion-icon name="home-outline"></ion-icon> |
| 37 | + <ion-label>Home</ion-label> |
| 38 | + </ion-tab-button> |
| 39 | + |
| 40 | + <ion-tab-button tab="2"> |
| 41 | + <ion-icon name="heart-outline"></ion-icon> |
| 42 | + <ion-label>Favorites</ion-label> |
| 43 | + </ion-tab-button> |
| 44 | + |
| 45 | + <ion-tab-button tab="3"> |
| 46 | + <ion-icon name="search-outline"></ion-icon> |
| 47 | + <ion-label>Search</ion-label> |
| 48 | + </ion-tab-button> |
| 49 | + |
| 50 | + <ion-tab-button tab="4"> |
| 51 | + <ion-icon name="settings-outline"></ion-icon> |
| 52 | + <ion-label>Settings</ion-label> |
| 53 | + </ion-tab-button> |
| 54 | + </ion-tab-bar> |
| 55 | + </ion-footer> |
| 56 | + </div> |
| 57 | + </ion-tabs> |
| 58 | + </ion-app> |
| 59 | + |
| 60 | + <style> |
| 61 | + .spacer { |
| 62 | + padding: 16px; |
| 63 | + height: 2000px; |
| 64 | + background: linear-gradient(to bottom, #e0f7fa, #80deea, #26c6da, #00acc1, #00838f); |
| 65 | + } |
| 66 | + |
| 67 | + .spacer p { |
| 68 | + margin-bottom: 12px; |
| 69 | + font-size: 16px; |
| 70 | + color: #333; |
| 71 | + } |
| 72 | + </style> |
| 73 | + </body> |
| 74 | +</html> |
0 commit comments