I have an ionic 2 app that I use a couple of tabs as shown below:
<ion-tabs color="dark" [selectedIndex]="index" class="right-align">
<ion-tab [root]="homePage" tabTitle="Home" tabIcon="home" ></ion-tab>
<ion-tab [root]="aboutPage" tabBadge="{{itemCount}}" tabTitle="About" tabIcon="ios-cart" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>
By default these two tab icons are centered on the page, is it possible to align these tab icons to the right and reduce the gap between both the icons?
There's an attribute for the ion-tabs tag to change the icon position:
<ion-tabs tabslayout="icon-end"> ... </ion-tabs>
The icon-end value will push your icons to the right.
About the gap you need to be more clear of what gap this is. Between the tab buttons there's only 4px of padding split by the two buttons, it's not a big gap, but you can add more padding to the icon so it can be pushed far to the right.
Hope this helps.
Related
I'm developing an Ionic app using Ionic 2.
I implemented tabs in a couple of pages. But in one page, tabs need to be placed at the bottom and on other page, it needs to be positioned at top. Tabs in both these pages are different.
For example, on Page A, tabs need to placed at bottom and on Page B, it needs to be on top
In app.module.ts, I gave the following code
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top',
platforms: {
android: {
tabsPlacement: 'top'
},
ios: {
tabsPlacement: 'top'
},
windows:
{
tabsPlacement: 'top'
}
}
}),
The above code, places the tabs on both pages at the top.
My question is, is there a way I can specify the tabs position specific to pages?
Thanks!
If there are two different tabs to be used on two different pages you can simply use the tabsPlacement attribute on the component to position the tabs at top or bottom of the page. Remove the tabs placement from your config and add tabsPlacement attribute on individual tabs html
<ion-tabs tabsPlacement="top"> // specify bottom to position at the bottom
...
<ion-tabs>
I know that using the following changes the icon color of my Tabs buttons when active:
$tabs-ios-tab-icon-color-active: red;
But I don't see how to change the background-color of the button when active.
Any help?
#cnak2, looking at https://github.com/ionic-team/ionic/blob/master/src/components/tabs/tabs.ios.scss, you can see the background color is set by the variable $tabs-ios-background.
I suggest changing this variable to include the color you would like to see.
In general go to this page to determine the sass variables for customization.
if you search "tab" you will see $tabs-background show up which is probably the one you want.
Try this , you change color on directory src/theme/variables.scss
<ion-tabs color="primary">
<ion-tab [root]="homeRoot" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="homeRoot" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="homeRoot" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="homeRoot" tabTitle="Home" tabIcon="home"></ion-tab>
</ion-tabs>
I am trying to pull off a "trick" in ionic2 as follows:
- I have one slide set to loop.
- When the slide is swiped I increase or decrease a variable
- that variable will cause different data to display in the slide.
This way I can get the full UI experience of the slides component without hardcoding or pre-loading all the other slides.
For eg lets say you are viewing data by day, I want to be able to slide back and forth to look at data from previous days. Given the change I will just reload the relevant days data.
It ALMOST works except that the slider doesnt seem to refresh properly when looping.
Take a look this
http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview
<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
<ion-slide>Slide{{newval}}
Test
</ion-slide>
</ion-slides>
</ion-content>
Controller
export class HomePage {
appName = 'Ionic App';
newval: number = 0;
constructor(public navController: NavController) { }
slideChanged(step: number) {
this.newval = this.newval + step;
}
}
If you swipe back and forth the text doesnt change. It should increase or decrease eg Slide 1, Slide 2 etc...
BUT do a few swipes and then instead of swiping just click down on the slide and move it a little and THEN the label does refresh to give you the correct value!
Its almost like because I am looping - all thats displayed is the original slide value and not the updated value, until I click somewhere on the slide causing it to refresh.
So bottom line I assume this is a bug?
Is there any way I can trigger this "refresh" behaviour programmatically?
Thanks
Hi change your code for home.page.html to:
<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
<ion-slide *ngFor="let item of items">Slide {{newval}}
<ion-list>
{{item}}
</ion-list>
</ion-slide>
</ion-slides>
I have tested it in plunker and the content will change when you slide. Do ngFor for each ion-slide instead of within the ion-slide
Try this ionic 3
<ion-slides loop="true" autoplay="1" speed="6000">
<ion-slide>Slide A</ion-slide>
<ion-slide>Slide B</ion-slide>
<ion-slide>Slide C</ion-slide>
</ion-slides>
When I run 5 tabs on an ionic 2 app in an iphone 5s emulator, it has wide margins between the icons and it cuts off the first and last icon off screen. It looks fine on the browser set to a smaller screen width so it looks like it should fit. It also looks fine on an iphone 6 emulator. Is this a bug in the ionic 2 beta css?
<ion-tabs>
<ion-tab [root]="tabFavesRoot" tabTitle="Faves" tabIcon="heart"></ion-tab>
<ion-tab [root]="tabPeopleRoot" tabTitle="People" tabIcon="people"></ion-tab>
<ion-tab [root]="tabHostGameRoot" tabTitle="Create" tabIcon="add-circle"></ion-tab>
<ion-tab [root]="tabMessagesRoot" tabTitle="Messages" tabIcon="chatbubbles"></ion-tab>
<ion-tab [root]="tabMyProfileRoot" tabTitle="My Profile" tabIcon="person"></ion-tab>
</ion-tabs>
I am using Foundation 5 and trying to include a menu inside of an accordion. When the accordion is clicked and expands it works fine but rather than pushing the below content down when opened, it opens over the background of the below content, but under the content of the below content.
I have tried to change the z-index of the accordion to 0 but it does not help. I have also added the clearfix class to no avail.
Can be seen here
Any help or suggestions would be appreciated.
Thanks,
Pete
The error is in this line:
<div class="large-3 medium-4 columns hide-for-small sidebar-wrap" data-equalizer-watch="" style="height: 228px;">
You've set a fixed heigth for the container. Since it is already at max height, it can't expand further down.
remove style="height: 228px;" and everything gets pushed down. If you need a fixed height, so the content doesn't snap up and down everytime the user clicks on the accordion set it to height: 402px;. Thats the value Chrome tells me for 4 elements, with one expanded.