Geek Answers Handbook

How to make sure the slide tab shows 3 tabs in html

I have an application on a mobile phone. The screen of the mobile phone is small and cannot display all 7 tabs at once. That way, it will appear as two rows of tabs that are not neat.

I want it to display 3 tabs at a time. For example, slide 2 shows the tabs for slide 1 on the left, slide 2 in the center, and slide 3 on the right. When I go up to page 3, slide tab 2 on the left, slide tab 3 in the center and slide tab 4 on the right. This means that the slide tab is moving.

It is in ionic structure 1, but I believe that it is associated with html.

This is my fragment

angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) { $scope.slideIndex = 0; // Called each time the slide changes $scope.slideChanged = function(index) { $scope.slideIndex = index; }; $scope.activeSlide = function (index) { $ionicSlideBoxDelegate.slide(index); }; }); 
 body { cursor: url('https://ionicframework.com/img/finger.png'), auto; } .slide-tab{ display: table; overflow: hidden; margin: 0; width: 100%; background-color: #eff0f2; border-bottom: 2px solid #00897B; } .slide-tab li{ float: left; line-height: 38px; overflow: hidden; padding: 0; } .slide-tab a{ background-color: #eee0f2; border-bottom: 1px solid #fff; color: #e81; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 2px solid #00897B; } .current a{ color: #efe; background: #00897B; } 
 <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Slide Tab</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="MyCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Ionic Slide Tab</h1> </ion-header-bar> <ion-content> <div class="row"> <ul class="slide-tab"> <li ng-class="slideIndex == 0 ? 'current':''"><a href="#" ng-click="activeSlide(0)">Tab01</a></li> <li ng-class="slideIndex == 1 ? 'current':''"><a href="#" ng-click="activeSlide(1)">Tab02</a></li> <li ng-class="slideIndex == 2 ? 'current':''"><a href="#" ng-click="activeSlide(2)">Tab03</a></li> <li ng-class="slideIndex == 3 ? 'current':''"><a href="#" ng-click="activeSlide(3)">Tab04</a> </li> <li ng-class="slideIndex == 4 ? 'current':''"><a href="#" ng-click="activeSlide(4)">Tab05</a></li> <li ng-class="slideIndex == 5 ? 'current':''"><a href="#" ng-click="activeSlide(5)">Tab06</a></li> <li ng-class="slideIndex == 6 ? 'current':''"><a href="#" ng-click="activeSlide(6)">Tab07</a></li> </ul> </div> <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding"> <ion-slide> <h3>Tab 1</h3> <p>Page 1</p> </ion-slide> <ion-slide> <h3>Tab 2</h3> <p>Page 2</p> </ion-slide> <ion-slide> <h3>Tab 3</h3> <p>Page 3</p> </ion-slide> <ion-slide> <h3>Tab 4</h3> <p>page 4</p> </ion-slide> <ion-slide> <h3>Tab 5</h3> <p>page 5</p> </ion-slide> <ion-slide> <h3>Tab 6</h3> <p>page 6</p> </ion-slide> <ion-slide> <h3>Tab 7</h3> <p>page 7</p> </ion-slide> </ion-slide-box> </ion-content> </body> </html>
+2
javascript html css ionic-framework
source share
1 answer

https://jsbin.com/jarepefixe/edit?html,js,output

Here is what I came up with. Its essence is a function that looks at which tab you are using and will only display other tabs if they are on the same tab of the current tab. The exception is on the endpoints to show either the next two tabs in front (located at index 0) or the previous two tabs (located at index 6 (for this example)). This will support 3 tabs at once. I hide tabs by applying a CSS class to elements to set their display to "none".

It should be noted that my proposed solution is not trying to get rid of the “dots” (I forgot the name of this) below. The reason for this is that the user interface design would be poor so as not to show the true number of tabs available to the user at any given time.

In fact, I would even go so far as to recommend against trying to make the tabs not visible at all (Android had sliding tabs in its menu system, but they got rid of them due to poor UX - people weren can't say that they were slippery ) On Android, TabHost is deprecated since the UX people decided that the tabs really weren’t very suitable for mobile devices because of the exact problem you were having. If possible, I would consider different ways to interact with your application. Perhaps a hamburger menu with various tab options? Of course, it depends on your needs. maybe just completely separate the tabs and save / only / dots at the bottom to tell the user that they have more screens to scroll through (e.g. Snapchat does this).

Returning to your question, I doubt that there is a “purely” HTML solution for showing / not displaying tabs, since HTML is just the content of the page, not the visual (CSS) or behavior (JS) of the page. However, you can work with CSS selectors with pseudo-selectors, but in the end, this can lead to a lot of hard-coded rules (using identifiers, etc.) if you want a solution that avoids JS.

Here are the changes to your code that I made:

 angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) { $scope.slideIndex = 0; // Called each time the slide changes $scope.slideChanged = function(index) { $scope.slideIndex = index; }; $scope.activeSlide = function (index) { $ionicSlideBoxDelegate.slide(index); }; $scope.is_plus_or_minus_one = function (questionable_index, current_index) { return Math.abs(questionable_index - current_index) <= 1; } $scope.determine_class = function (index) { let return_class = ''; let min = 0; // lowest tab index let max = 6; // highest tab index if ($scope.slideIndex === index) return_class = 'current'; else if ($scope.is_plus_or_minus_one(index, $scope.slideIndex) || ($scope.slideIndex === min && index === min + 2) || ($scope.slideIndex === max && index === max - 2)) return_class = ''; else return_class = 'hidden'; return return_class; } }); 
 body { cursor: url('https://ionicframework.com/img/finger.png'), auto; } /* FIXME: just using this for testing (making sure dot behavior remains intact without having to scroll) .scroll-content { bottom: auto!important; } */ .slide-tab{ display: table; overflow: hidden; margin: 0; width: 100%; background-color: #eff0f2; border-bottom: 2px solid #00897B; } .slide-tab li{ float: left; line-height: 38px; overflow: hidden; padding: 0; } .slide-tab a{ background-color: #eee0f2; border-bottom: 1px solid #fff; color: #e81; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 2px solid #00897B; } .current a{ color: #efe; background: #00897B; } .hidden a { /* you could just hide them visually, but i don't think that what you want... visibility: hidden; */ /* or you could displace them from the DOM which should get the desired effect */ display:none; /**/ } 
 <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Slide Tab</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="MyCtrl"> <ion-content> <div class="row"> <ul class="slide-tab"> <li ng-class="determine_class(0)"><a href="#" ng-click="activeSlide(0)">Tab01</a></li> <li ng-class="determine_class(1)"><a href="#" ng-click="activeSlide(1)">Tab02</a></li> <li ng-class="determine_class(2)"><a href="#" ng-click="activeSlide(2)">Tab03</a></li> <li ng-class="determine_class(3)"><a href="#" ng-click="activeSlide(3)">Tab04</a></li> <li ng-class="determine_class(4)"><a href="#" ng-click="activeSlide(4)">Tab05</a></li> <li ng-class="determine_class(5)"><a href="#" ng-click="activeSlide(5)">Tab06</a></li> <li ng-class="determine_class(6)"><a href="#" ng-click="activeSlide(6)">Tab07</a></li> </ul> </div> <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding"> <ion-slide> <h3>Tab 1</h3> <p>Page 1</p> </ion-slide> <ion-slide> <h3>Tab 2</h3> <p>Page 2</p> </ion-slide> <ion-slide> <h3>Tab 3</h3> <p>Page 3</p> </ion-slide> <ion-slide> <h3>Tab 4</h3> <p>page 4</p> </ion-slide> <ion-slide> <h3>Tab 5</h3> <p>page 5</p> </ion-slide> <ion-slide> <h3>Tab 6</h3> <p>page 6</p> </ion-slide> <ion-slide> <h3>Tab 7</h3> <p>page 7</p> </ion-slide> </ion-slide-box> </ion-content> </body> </html>
+3
source share

More articles:


All Articles