Ionic tabs in the middle of the screen
How do I make an ionic tabs in the middle of the screen?
Ionic tabs in the middle of the screen. By default Ionic doesn't provide tab in the middle of the screen, this approach tried to solve that problem.. What is a ionic tabs in the middle of the screen? How do you make a ionic tabs in the middle of the screen? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.
Ionic tabs in the middle of the screen - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ionic tabs in the middle of the screen</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="ionicApp" > <title>Starter</title> <body ng-controller="MainCtrl"> <ion-nav-view> <ion-view> <ion-header-bar class="bar bar-positive"> <h1 class="title">Tab Example</h1> </ion-header-bar> <ion-content id="home" class="has-header"> <div class="bar bar-stable" style="position:relative"><h1 class="title">Ionic Slide</h1></div> <ion-slide-box id="slider" does-continue="true" on-slide-changed="slideHasChanged($index)"> <ion-slide ng-repeat="post in features" class="assertive-bg" style="background: url('http://loremflickr.com/320/240/{{post.key}}')"> <h1 class="light">{{post.title}}</h1> <p class="light">{{post.content}}</p> </ion-slide> <!-- <ion-slide class="assertive-bg" style="background: url('http://loremflickr.com/320/240/paris')"> <h1 class="light">Paris</h1> <p class="light">Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture</p> </ion-slide> <ion-slide class="energized-bg" style="background: url('http://loremflickr.com/320/240/barcelona')"> <h1 class="light">Barcelona</h1> <p class="light">Barcelona, the cosmopolitan capital of Spain’s Catalonia region, is defined by quirky art and architecture, imaginative food and vibrant street life.</p> </ion-slide> <ion-slide class="dark-bg" style="background: url('http://loremflickr.com/320/240/amsterdam')"> <h1 class="light">Amsterdam</h1> <p class="light">Amsterdam is the Netherlands’ capital, known for its artistic heritage, elaborate canal system and narrow houses with gabled facades, legacies of the city’s 17th-century Golden Age.</p> </ion-slide> --> </ion-slide-box> <div class="bar bar-stable" style="position:relative"><h1 class="title">Swiper Slide</h1></div> <div id="swiper" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" ng-repeat="post in features" style="background: url('http://loremflickr.com/320/240/{{post.key}}')"> <h1 class="light">{{post.title}}</h1> <p class="light">{{post.content}}</p> </div> </div> <div class="swiper-pagination"> </div> </div> <ion-tabs class="tabs-positive tabs-top tabs-striped relative"> <ion-tab title="Hot Topics"> <ion-tab-header></ion-tab-header> <ion-content class="has-header"> This is hot topics </ion-content> </ion-tab> <ion-tab title="Events"> <ion-tab-header></ion-tab-header> <ion-content class="has-header"> This is events </ion-content> </ion-tab> <ion-tab title="News"> <ion-tab-header></ion-tab-header> <ion-content class="has-header"> This is news </ion-content> </ion-tab> </ion-tabs> </ion-content> </ion-view> </ion-nav-view> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Ionic tabs in the middle of the screen - Script Codes CSS Codes
body { cursor: url("https://ionicframework.com/img/finger.png"), auto;
}
#slider, #swiper { height: 200px;
}
.slider .slider-slide,
.swiper-container .swiper-slide { text-align: center; padding: 50px 10px 10px 10px; background-repeat: no-repeat !important; background-size: cover !important;
}
.swiper-container { width: 100%; height: 100%;
}
.relative .pane,
.relative .tabs,
.relative .scroll-content { position: relative; top: auto;
}
#home .pane { height: auto;
}
Ionic tabs in the middle of the screen - Script Codes JS Codes
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicLoading, $http) { $scope.features = [ { key: 'paris', title: 'Paris', content: 'Paris, France capital, is a major European city and a global center for art, fashion, gastronomy and culture' }, { key: 'barcelona', title: 'Barcelona', content: 'Barcelona, the cosmopolitan capital of Spain’s Catalonia region, is defined by quirky art and architecture, imaginative food and vibrant street life.' }, { key: 'amsterdam', title: 'Amsterdam', content: 'Amsterdam is the Netherlands’ capital, known for its artistic heritage, elaborate canal system and narrow houses with gabled facades, legacies of the city’s 17th-century Golden Age.' } ]; window.setTimeout(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, loop: true }); }, 2000);
});
Developer | Dzulfikar Adi Putra |
Username | superpikar |
Uploaded | September 06, 2022 |
Rating | 3 |
Size | 3,727 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
JS Tree Example JSON Data | 2,435 Kb |
A Pen by Dzulfikar Adi Putra | 8,016 Kb |
Expand and collapse element using jquery expander | 1,854 Kb |
D3JS Simple JSON SVG barchart vertical | 2,234 Kb |
Multiple Expand Collapse | 2,733 Kb |
SVG Animation Follow Path - d3js | 3,068 Kb |
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON | 6,536 Kb |
Image Map | 4,096 Kb |
D3JS Simple JSON SVG barchart vertical with Axis | 2,699 Kb |
Vue v1 Search and Pagination | 4,859 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rainbow Drops | Csbarnes | 2,365 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Welcome | Nakome | 6,076 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Three js | Paulq | 2,353 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!