I have noticed that working with Ionic2 Framework when a new page with tabs loads, the first tab is active.
What I want, is to set all tabs inactive when the page loads for the first time. I tried [selectedIndex]=-1, but it didn't work.
My html concerning that part is:
<ion-tabs>
<ion-tab [root]="tab1" tabIcon="list" tabTitle="Categories"></ion-tab>
<ion-tab (ionSelect)="scanner()" tabIcon="barcode" tabTitle="Scan"></ion-tab>
<ion-tab (ionSelect)="buffer()" tabIcon="browsers" tabTitle="History"></ion-tab>
<ion-tab (ionSelect)="cart()" tabIcon="cart" tabTitle="Shop"></ion-tab>
</ion-tabs>
Is there any attribute that I can set so I implement that kind of behaviour or am I looking for the impossible?
Thanks in advance.
Related
I have a button on a page (page 2) that links to another page (page 1). On page 1 I have a modal. How would one set the button on page 2 to link to page 1, and automatically pop the modal. I understand a normal link would be href='/page1', I have tried href='/page1#modal', but this does not work. I am running jQuery if this would be the route to go - I have seen some solutions around this but very outdated.
If this is even possible, any help or pointers will be much appreciated.
Add #modal part to the href in page2, and check URL on page1 load and if it contains #modal, show modal.
$(document).ready(function(){
if(window.location.href.indexOf('#modal') > -1)
$('#myModal').modal();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm developing an app using Ionic 3.
I have tabs at the bottom of my app.
The thing is, I want each tab to have a different color but I was unable to achieve it with my SCSS sheet.
I could only change the color of the entire bar but not select each tab by overriding SCSS variables.
Does anyone know how to do it?
Here's my HTML.
<ion-tabs selectedIndex="0" >
<ion-tab className="fontSizeText" [root]="homeRoot" tabTitle="Scanner un code" tabIcon="camera"></ion-tab>
<ion-tab [root]="productRoot" tabTitle="Produits" tabIcon="basket"></ion-tab>
<ion-tab className="fontSizeText" [root]="informationRoot" tabTitle="Sensibilisation" tabIcon="leaf"></ion-tab>
<ion-tab [root]="accountRoot" tabTitle="Mon Compte" tabIcon="build"></ion-tab>
</ion-tabs>
Sincerely,
thanks
You could try to give your ion-tabs element any identifier, like a class or an id. Then you can access your tabs via CSS like this:
ion-tabs.yourClass {
.tabbar {
a.tab-button {
&:nth-child(1) {
background-color: black;
}
&:nth-child(2) {
background-color: black;
}
...
}
}
}
It is not the prettiest solution, but that is the only way I know, to access the single Tab elements.
The problem is, that when you put any class on to the ion-tab element, it will be added to the ion-tab and not the link to it. Ionic creates this toolbar at the top or bottom dynamically.
Is there any way to get the active tab index in Ionic 2? I have searched, in Ionic 1 there is $ionicTabsDelegate.
Pass the event object to your method:
<ion-tabs (ionChange)="tabSelected($event)">
The event object is actually the selected Tab:
tabSelected(tab: Tab) {
console.log(tab.index);
}
Your navController should link to the nested Tab which has a property 'index'.
console.log((<Tab>this.navCtrl).index);
I think this is a little hacky so I'm happy to see other answers. But for the moment you could try that :)
You can add an ID to the tabs element e.g. <ion-tabs #myTabs> and use #ViewChild('myTabs') myTabs: Tabs; to get a reference to the HTML tabs element. In the controller you can call this.myTabs.getSelected() which has an index property, which return the active tab's index
I need to add tooltip like below in paginator link button :
-'Page 1 out of 56'
-'Page 2 out of 56' etc
I added title attribute in the render() method of PageLinksRender class. First time while page is loading it is showing the proper tooltips but after clicking the paginator link button the tool tip is gone.
Can anyone suggest me how to achive the tooltip in paginator link button even after clicking some other paginator link in the primefaces paginator?
Added the title attribute to paginator link span tag present in the paginator.js under primefaces library.
On my website there is a contactform on the bottom of the page. When it is filled in and a user pressed the submitbutton, the page reloads but shows the top of the page. What do I need to adjust so when a user pushed the submitbutton, the page reloads and goes to the bottom of the page?
Thanks!
You have a few options:
Set the hashtag
You can use jQuery and use .scrollTop()
Or native with window.scrollBy(0,9999);
Submit the for through Ajax so you don't have to refresh the page.
Put a named anchor to where you want to go after form sending:
<a name="afterform"><h1>Example: a heading</h1></a>
And then add that as a hash to the form action:
<form action="yourpage.html#afterform" ...