I'm trying add two icons in each sides of a ion-header where the title is in the center, but it always ends up with the two icons on the right side.
This is my code
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
</ion-buttons>
<ion-title>Title</ion-title>
<ion-buttons end>
<button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
which results in this header:
I can't figure it out, tried different kind of tutorials and trying to copy their example without any success. There's no styling behind it either, so nothing should mess up the layout. It feels like the "start" element is bugged in this version of Ionic or something. Could someone pinpoint me to the right direction?
This is my output when running "ionic info":
Your system information:
ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed
I used left instead of start
check this plunker
<ion-header>
<ion-navbar color="primary">
<ion-buttons left>
<button ion-button icon-only>
<ion-icon name="chatboxes"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
<ion-buttons right>
<button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
#varun aaruru answer is right. I just want to complement adding hideBackButton="true" to remove back button
<ion-header hideBackButton="true">
<ion-navbar>
<ion-title>trans-result</ion-title>
</ion-navbar>
</ion-header>
I wanted an ionic toolbar with multi-line headers and backward and forward arrows on either end:
After some experimentation, this worked:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button [routerLink] = "['/user-login']">
<ion-icon slot="icon-only" name="arrow-back-circle-sharp"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Yummy Pizzas</ion-title>
<ion-title size="small">Welcome, {{userName}}!</ion-title>
<ion-buttons slot="end">
<ion-button [routerLink] = "['/pizza-menu']">
<ion-icon slot="icon-only" name="arrow-forward-circle-sharp"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Related
I have an component like so:
<ion-toolbar style="height: 100%">
<ion-buttons slot="start">
<ion-button> Logo</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
About
</ion-button>
<ion-button>
Connect
</ion-button>
<ion-button>
Watch
</ion-button>
<ion-button>
Events
</ion-button>
<ion-button>
Give
</ion-button>
</ion-buttons>
</ion-toolbar>
And I call it within another page like so:
<ion-header style="height: 8%">
<app-header style="height: 100%">
</app-header>
</ion-header>
However, when I run it and view the html it comes like this:
As you can see, the <ion-toolbar> is not matching the height of the <ion-header>. Technically it is, but <ion-toolbar> has a shadow root component nested within it called: div.toolbar-container. That shadow root component is the one not setting the height to match the <ion-toolbar> even though the <ion-toolbar> component is working properly and matching the height of the <ion-header>.
Here is the correct example when I edit the styling of that shadow root component to height: 100% using HTML inspect:
So how can I change the height of that div class when it's parent is showing correctly but that div class isn't?
I've tried doing that Ionic Shadow parts document but that only relates to creating shadow root parts on your own.
The shadow root components that I'm trying to style seem to come standard with the and so that's what I'm trying to style.
I find it strange that the in the HTML inspect displays 100%, but it's shadow root component won't match it?
What a question. Obviously you would put this in your component.scss:
ion-toolbar {
--min-height: 8vh;
}
Everyone knows that.
I have implemented an ion-back-button into my toolbar in order to navigate back. But the button is not at its proper place and somehow displaced.
I even directly copied the code from the documentation but it still doesn't work.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I added a SIDEMENU in my project as second page, and the first page is a screen only one image with a button for the second. But when I click the button, instead of showing the sidemenu button in the upper left corner, it is showing only the "back" arrow, but if I put my SIDEMENU page as the rootpage, it works perfectly. I just want to go to the second page and my sidemenu appear perfect and not like the "back" button. Please, if anyone understands me, help me: D
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> Vida carioca </ion-title>
</ion-navbar>
</ion-header>
it's this wrong
as i want
I am adding an ion-icon button to the ion-navbar in an Ionic 2 app.
It works correctly, but this solution seems rather verbose.
I would like to confirm that this is the correct/simplest-form/best-practice approach:
<ion-navbar>
<ion-title>Books</ion-title>
<ion-buttons end>
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I would like to confirm that this is the
correct/simplest-form/best-practice approach.
It's perfect :)
It may seems like a little verbose, but each part of the code has its purpose. The <ion-buttons end>...</ion-buttons> will act as a container, to place the button in the right place.
In this case you're using end, and as you can see in this answer:
start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first
button on the right for android.
<ion-buttons end> would be on the right for ios and the last button on
the right for android.
left/right are provide as a way to over ride that.
Then inside of that container, you just need to place the button, in this case, with an icon inside:
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
I've added a side menu in my ionic 2 application that I'm developing, modifying the "super" template given by ionic. I've added the following code in app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I swipe on the left the menu appears correctly, but the problem is that, in the header of pages, I can't see the three bars to open the menu:
From the documentation, it seems that simply adding this code to the html makes the three bars appear, but it isn't working for me. Do I have to change something in the header of all the pages? I don't know, maybe the super template itself overrides something in the header of pages, so that the bars are not showed?
You could try adding button and icon.
Like this:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>