Adding a "Hero Panel"

ionic-v1
1

Have a look at the picture I attached. This is what I am trying to achieve.image
To be more exact:

image
image.png768×362 9.86 KB
(Just with the header bar intact).

The only place I found to place something between the header-bar and the tabs was in the index.html, immediately after </ion-nav-bar>. Problem is, I need to be able to control what’s in the container based on the view I am on.

How would I go about implementing this?
Also, since this is a pretty common layout, wouldn’t it make sense to add a feature like this to the main release?

2

The area for the content in an app is between header and footer.
If you build an Ionic app with header and a tab-bar, Ionic generate depending on the platform.
For IOS the tab-bar is always on the bottom.
For Android the tab-bar is ontoo beneath the header.

3

Not quite. We are sticking to Google’s Material Design spec, so the app looks the same on both platforms.

Populating the panel with content is not an issue I think. I just need to have a div sitting there, between the header and top-tab-bar, showing on certain routes.

4

This is what I do:

<ion-pane class="hero-div"></ion-pane>
<ion-content class="with-hero"></ion-content>

.hero-div {
    position: absolute;
    top: 44px;
    height: 100px;
}

.with-hero {
    top: 144px !important;
}

It feels like a dirty and very fragile trick and I’d like it if there was some better way, but it works for me.

You might need to experiment with values a bit depending if you have statusbar shown or hidden, etc.

5

So from the sound of things, you want to be abel to have text and a search bar in your main nav-bar?

Try this

http://ionicframework.com/docs/api/directive/ionNavTitle/