How to implement this design-idea?


#1

Hi,
I want to implement an little design with three different “views”.

First view: Login-screen. No header, no footer, just a login form on a background image.

First view: Header-bar with headline and one butten at the top-right. White background.

Third view: Header-bar with dynamic title, backbutton, two buttons at the top-right, and than a tab-bar with four tabs.

How to implement this design and seperate the three different headers (no one / with one button / with two buttons)? I try to start with the tabs-layout but could not figure out, how to seperate the different disigns correct.


#2

I’m sure that’s doable, in fact I’ve just tried out that change in my app and it was like 5 minutes work.

This is how my original login.html looked before I changed it - it has a title bar (and a subtitle bar):

<ion-view title="Welcome">
  <ion-nav-bar class="bar-stable">
  </ion-nav-bar>

  <div class="bar bar-subheader bar-subbar">
    <h4>Log in with your email and password.</h4>
  </div>

  <ion-content class="has-subheader" has-header="true" has-tabs="true" padding="false" scroll="true">
     ...

And this is how my login.html looks after I made the change - the title bar is now gone:

<ion-view>

  <ion-content has-header="false" has-tabs="false" padding="false" scroll="true">
    <form name="loginForm" novalidate="">
        ...

And my top level menu definition still has the title bar defined which is the default for every page that has this view as its parent (through a UI-router abstract parent state). The login page does NOT have the menu view as its parent so it does not inherit the title bar. (Same principle would apply to tabs.)

My menu.html looks like this:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-mainbar">
      <ion-nav-back-button nav-clear>
        <!-- back button will automatically be rendered when appropriate only -->
      </ion-nav-back-button>

      <ion-nav-buttons side="right">
        <ng-include src="'js/app/util/messages.html'"></ng-include>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

So from what I can tell it’s definitely possible to mix those different designs.


#3

Yes that’s working, thanks. I thought I’ve used the same structure… but doesn’t matter, it works :wink:


#4

I’ve used the same design concept now (login/signup without a header bar and with a big graphic logo, other pages with a header bar) and it looks pretty slick.

Kind of makes your app stand out a bit and not looking so run-of-the-mill.