i've the the following problem with the header (toolbar) position in the roots pages:
Why the headers root pages are located above the tabs ? i need to put them within childs page.
the code is so simply:
tabs.html
<ion-tabs tabsPlacement="top" tabsLayout="icon-bottom" tabsHighlight=true>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle">
</ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
tab1Root (home.html)
<ion-header>
<ion-toolbar>
<div >
<small>
this is the toolbar ...
</small>
</div>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content>
thanks.
Because you have placed the <ion-toolbar> within an <ion-header> which will position it at the top (header) of the screen. Please see the Ionic Toolbar docs.
Try placing it within <ion-content> instead.
<ion-content>
<ion-toolbar>
<ion-title>this is the toolbar ...</ion-title>
</ion-toolbar>
</ion-content>
Related
I've made a custom toolbar component:
<ion-toolbar>
<ion-title color="black" size="small"><strong>Account Information</strong></ion-title>
<ion-buttons slot="start">
<ion-back-button (click)="return()" color="green" defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-content></ion-content>
</ion-toolbar>
If I reuse this toolbar in different places in my app, can i customize the content of it somehow?
for example, how can I add a save button to it in a page where i use the
toolbar component?:
<ion-header class="ion-no-border">
<app-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="save()" color="green">
Save
</ion-button>
</ion-buttons>
</app-toolbar>
</ion-header>
<ion-content>
<ion-grid>
...
In this example the save button doesn't show up
i started a project with tab template which i then later decided to add a side menu. the trouble is the side menu does not appear at all. here is my app.components.html looks like
<ion-app>
<ion-split-pane>
<ion-menu side="start">
<ion-header translucent>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>
actually after doing above my actual page comes for a brief second and shows a white page due to this.
in the console i see an error
sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.
but i already have content element.
Sirius2013 is correct, you will need to use the contentId attribute.
See a working example below:
App.component.html
<ion-app>
<ion-menu contentId="content1" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
menu stuff
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
AnyPage.html
In the page you want to show your side menu, you can use the ion-menu-button tag.
See this example:
<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Set the autoHide tag to false, so you will always see the menu button.
Docs:
https://beta.ionicframework.com/docs/api/menu-button
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
https://beta.ionicframework.com/docs/api/menu
Try to use contentId attribute.
I am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.
I have a blank app with many pages. One of these pages needs to be diveded into tabs.
I want a few tabs to be displayed under the header (which has logo and back button).
However, for some reason, the tabs are hidden almost completly beneath the header.
The structure is the following:
<ion-view view-title="MyPage">
<ion-header-bar align-title="center">
<div class="app_header_side">
<button class="button back-button">
<i class="icon ion-ios-arrow-back"></i>
</button>
</div>
<div class="app_header_center">
<div class="text-center">
LOGO
</div>
</div>
<div class="app_header_side">
</div>
</ion-header-bar>
<ion-content class="padding has-header">
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
I have tried to put the tabs everywhere. In the header, before "ion-view", before "ion-content". Nothing worked.
The only way to make ti work was to add
style="padding-top: 30px;"
in the tag for "ion-content". But I would prefer to avoid putting fixed padding.
I would suggest the following by declaring the header as follow:
<ion-header-bar class="bar-header">
and then defining the has-header
<ion-content class="has-header">
Alternatively as a test you can set:
<ion-content class="has-subheader">
That would imply that something like a ion-nav-bar for example is set as the header already. Then set the ion-header-bar as bar-subheader.
IONIC Headers and Sub-Headers
Alternatively you can place tab at bottom same like iOS.
Set $ionicConfigProvider.tabs.position('bottom'); in .config
I think you should try
<ion-view view-title="MyPage" class="has-header">
I came across same issue once. I used class="has-header" to root view that solved my problem.
I just started using Ionic with Angular for a project. So this might be a beginners mistake.
So I made an html file with a header, tabs and a list inside a tab. Now I do get the problem that the first item of the list disappears after the header.
I'm trying to achieve this with the following code:
<ion-header-bar class="bar-default">
<h1 class="title">Test</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped">
<ion-tab title="Rooms">
<ion-content class="scroll-content ionic-scroll has-header">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Another tab"></ion-tab>
<ion-tab title="Another tab"></ion-tab>
</ion-tabs>
This does give me a header, a list and tabs. But like I said, the first item disappears after the header.
I noticed if I put the <ion-content><ion-list>..</ion-list></ion-content> outside of the tabs content, it does actually work like it should. But according to the documentation you can place the content inside of the ion-tab tag.
ion-tabs contains a set of ion-tab but ion-tab directive requires you to include a ion-nav-view inside each tab.
You won't find this in the documentation.
Your html would look like this:
<body ng-app="app">
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped tabs-top">
<ion-tab title="Rooms">
<ion-nav-view>
<ion-content ng-controller="mainCtrl">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>AAA</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>BBB</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
I've used the class tabs-top for the ion-tabs directive but you can change it the way you prefer.
Notice that I've placed a <ion-nav-view> inside each <ion-tab>.
That's the place where your content will be loaded by the framework.
It's tricky but it becomes obvious when you start playing with routes and each tab content is loaded from other views.
If you want to see how it works you can check this.